Custom Hook UseFetch( )

useFetch.js

import { useEffect, useRef, useState } from "react";


const useFetch = (url) => {

    const isMounted = useRef(true); //mantienes la referencia a la variable.

    const [ state, setState ] = useState({ 
        data: null,
        loading: true,
        error: null
    });


    useEffect(() => {

      return () => {
        isMounted.current = false; 
      }
    }, [ ])


    useEffect(() => {

        setState({ data: null , loading: true, error: null });

        fetch(url)
            .then( resp => resp.json())
            .then( data => {

                if( isMounted.current ) {
                    setState({
                        loading: false,
                        error: null,
                        data
                    });
                }

            }).catch(()=> {

                setState({
                    data: null,
                    loading: false,
                    error: 'No se pudo cargar la información'
                });

            });

    }, [ url ])


    return state;    
}

export default useFetch