Memoize API response using useCallback hook

Question

I need to fetch an API in my React project when I click on a button, but if I click again it should not redo the API call but retrieving the latest fetched data instead.

I know the hook useCallback that can memoize function. So I just put my API call inside an useCallback:

  const memoizedApiResponse = React.useCallback(async () => {
    console.log("fetch is called again :(");
    let response = await fetch("https://api.stackexchange.com/2.2/users?order=desc&sort=reputation&site=stackoverflow");

    return await response.text();
  }, []);

So I just call this memoized function when I click on the button:

import React from "react";

const App = () => {
  const [apiResponse, setApiResponse] = React.useState(undefined);

  const memoizedApiResponse = React.useCallback(async () => {
    console.log("fetch is called again :(");
    let response = await fetch(
      "https://api.stackexchange.com/2.2/users?order=desc&sort=reputation&site=stackoverflow"
    );

    return await response.text();
  }, []);

  const updateApiResult = async () => {
    const apiResponse = await memoizedApiResponse();
    setApiResponse(apiResponse);
  };

  return (
    <div className="App">
      <button onClick={updateApiResult}>fetch API</button>
      <p>{apiResponse}</p>
    </div>
  );
};

export default App;

But sadly on each click the request is send (you can see the message in the console). Have you an idea how to memoize the request response using useCallback?

Here is a link to the codesandbox.

Are you trying to keep the function from being created multiple times or keep the data from being fetched multiple times. useCallback saves you from creating a function every render. It doesn't memoize the data that it might return. You will still keep calling the memoized function. — zero298
– zero298, Commented Sep 8, 2020 at 14:36
The simplest solution would be to check if the apiResponse variable is already filled inside the updateApiResult — 0stone0
– 0stone0, Commented Sep 8, 2020 at 14:36

zero298 · Accepted Answer · 2020-09-08 14:43:51Z

4

memoizedApiResponse is not what its name implied (a memoized API response), it is a memoized function that will get you data from an API. You are just saving yourself the creation of the function that will get you the data, not the actual retrieval of the data.

Additionally, that useCallback probably isn't saving you much. I suggest you read this article: When to useMemo and useCallback it really helps with understanding what some of these memoizing hooks do and when they actually help you.

I think you want this

import React from "react";

const App = () => {
  const [apiResponse, setApiResponse] = React.useState(undefined);
  
  const getData = async () => {
    if (apiResponse) {
      return apiResponse;
    }
  
    const response = await fetch("https://api.stackexchange.com/2.2/users?order=desc&sort=reputation&site=stackoverflow");
    const data = await response.text();
    setApiResponse(data);
  };

  return (
    <div className="App">
      <button onClick={getData}>fetch API</button>
      <p>{apiResponse}</p>
    </div>
  );
};

export default App;

answered Sep 8, 2020 at 14:43

zero298

27.1k10 gold badges80 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

johannchopin Over a year ago

Oh Ok I understand. So I guess I will need to implement a store for my API calls. Thanks for the explanation.

Dennis Vash · Accepted Answer · 2020-09-08 14:40:31Z

2

useCallback doesn't memoize responses, it memoizing the function declaration between renders.

In your case you only need to check if you already have a result, to fix your code and keep the useCallback you need to use a reference:

const textRef = useRef(null);

const memoizedApiResponse = React.useCallback(async () => {
  if (textRef.current === null) {
    console.log("fetch is called");
    textRef.current = true;
    let response = await fetch("...");

    const text = await response.text();
    textRef.current = text;
    return text;
  }

  return textRef.current;
}, []);

answered Sep 8, 2020 at 14:40

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

1 Comment

johannchopin Over a year ago

Thanks for the explanation but I will probably just create a store for that instead of using useRef.

Collectives™ on Stack Overflow

Memoize API response using useCallback hook

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related