Return function from inside custom hook

Question

I have the below custom hook;

export default function useFetch(url) {
    const [response, setResponse] = useState();
    useEffect(() => {
        const fetchresponse = async () => {
            // code to fetch response from api
        }
        fetchresponse();
    }, [url]);

    return [response];
}

While the above works fine from the start of my functional component, I want to make this reusable and invoke them from other places in my main component (eg button click) ie hit api on button click. Thus, I want to return an executable function, which can be invoked on say button click.

How can I do that and considering I have a useEffect here inside my custom hook?

Answer 1

Just define the function outside the useEffect hook.

Then it will be in scope to return.

function useFetch(url) {
    const [response, setResponse] = useState();

    const fetchresponse = async () => {
        // code to fetch response from api
    }

    useEffect(() => {
        fetchresponse();
    }, [url]);

    return [response, fetchresponse];
}

Optionally wrap the function in useCallback so it doesn't get redefined with each render.