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

CodePudding user response：

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 component

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.

CodePudding user response：

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