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 ponent itself but then fetch will happen when the ponent 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

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 ponent itself but then fetch will happen when the ponent 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

• javascript
• reactjs
• react-hooks

• 1 Custom fetch hooks generally return a function to call to make a fetch request, and also return status of the request, including errors. What is your useFetch hook implementation and how is your code using it, or trying to use it? – Drew Reese Commented Dec 2, 2021 at 7:42
• @DrewReese useFetch just fetches data from the provided url and does a try catch along with checking for status code errors. It has a useEffect which calls the defined fetchData function and exports the stateful data value. Should I instead just define the function and return the function and that's it? Then, make sure I fetch inside of a useEffect in the files that use it? – embracethefuture Commented Dec 2, 2021 at 7:57
• Are you asking us how to use the custom useFetch hook that you're not sharing with us so we can't say how to use it? Or are you asking about how to write a custom useFetch hook that is actually usable? Either way, these aren't very answerable questions and we'd need more context. The purpose of custom hooks is to encapsulate reusable code to be used in React function ponents. – Drew Reese Commented Dec 2, 2021 at 9:55

2 Answers 2

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 ponent 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 };
}

Ah! The hooks in React.

One way to do this would be to define your functions in the useFetch method which are responsible for making the API calls and then return those functions from the hook to be used wherever you want to.

For example, a useFetch hook would look like this

const useFetch = () => {
  const makeApiCall = () => {};
  
  return {
    makeApiCall
  }
}

and then inside your ponent

const Comp = () => {
  const { makeApiCall } = useFetch();
  
  return (
    <Button onClick={makeApiCall} />
  )
}

You can always pass some relevant info to the hook and return more relevant data from the hook.