How do I use my custom useFetch hook when a button is clicked?

Question

Semi-new to React. I have a useFetch hook that has all of my fetch functionality, and I want to call it to fetch the next page of items when the user clicks a "load more items" button.

Obviously,

<button onClick={() => { useFetch(...) }}>load more items<button> won't work because I'm calling a custom hook inside a callback. What is the best pattern in general for doing this kind of thing? I can call useFetch in the functional component itself but then fetch will happen when the component mounts, which isn't really what I want.

Everything I've read points to the usefulness of making fetching a hook, but it's just made it harder to work with, especially when I have to fetch small chunks frequently and dynamically.

edit: I may have figured it out, I'll post again with the answer if it works and this post doesn't receive an answer

Answer 1

You shouldn't call a hook from an event handler, as you've noticed yourself.

Your useFetch() hook usually shouldn't fetch any data, but rather return a function that you can call to fetch data afterwards.

Your component would then look something like this:

const MyComponent = () => {
  const { fetch, data } = useFetch();
  return (<div>
      <p>{data}</p>
      <button onClick={() => fetch()}>Load more items</button>
    </div>);
}

Your useFetch hook is then responsible for

• Creating a fetch function.
• Returning data once fetch has been called and resolved.
• Keeping data in state, and updating data if fetch is called again.

Here's what the useFetch hook might look like

function useFetch() {
  const [data, setData] = useState();
  const fetch = async () => {
    const result = await // call to your API, or whereever you get data from
    setData(result.data);
  };

  return { fetch, data };
}