Fetch Data With A Custom React Hook

I'm newbie in React but I'm developing an app which loads some data from the server when user open the app. App.js render this AllEvents.js component: const AllEvents = function ({

Solution 1:

Do not pass a hook to a custom hook: custom hooks are supposed to be decoupled from a specific component and possibly reused. In addition, your custom hooks return always null and that's wrong. But your code is pretty easy to fix.

In your main component you can fetch data with a custom hook and also get the loading state like this, for example:

functionEvents () {
  const [events, loadingEvents] = useEvents([])

  return loadingEvents ? <EventsSpinner /> : <div>{events.map(e => <Eventkey={e.id}title={e.title} />}</div>
}

In your custom hook you should return the internal state. For example:

functionuseEvents(initialState) {
  const [events, setEvents] = useState(initialState)
  const [loading, setLoading] = useState(true)

  useEffect(function() {
    axios.get("https://server.ru/events")
            .then(
                (res) => {
                    setEvents(res.data)
                    setLoading(false)
                }
            )
  }, [])

  return [events, loading]
}

In this example, the custom hook returns an array because we need two values, but you could also return an object with two key/value pairs. Or a simple variable (for example only the events array, if you didn't want the loading state), then use it like this:

const events = useEvents([])

Solution 2:

This is another example that you can use, creating a custom hook that performs the task of fetching the information

exportconstuseFetch = (_url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(true);

  useEffect(function() {
    setLoading('procesando...');
    setData(null);
    setError(null);
    const source = axios.CancelToken.source();
    
    setTimeout( () => {
      axios.get( _url,{cancelToken: source.token})
        .then(
          (res) => {
            setLoading(false);
            console.log(res.data);
            //setData(res);
            res.data && setData(res.data);
            // res.content && setData(res.content); 
          })
          .catch(err =>{
            setLoading(false);
            setError('si un error ocurre...');
          })
    },1000)
    
    return()=>{
      source.cancel();
    }    
  }, [_url])