Can you help me explain why useMemo doesn't function as a cache?
Unanswered
Longtail tuna posted this in #help-forum
Longtail tunaOP
I saw two sentences in the document:
https://react.dev/reference/react/use#caveats
1. use re-renders the component after the data is resolved.
Question: Why is useMemo executed again when re-rendering? How to understand re-render here?
2. Promises created in Client Components are recreated on every render.
Question : How to understand this sentence
Demo : https://codesandbox.io/p/sandbox/react-dev-forked-8fpjhd?workspaceId=ws_HRgeaCc4c14UUVZk6sijk9
code:
https://react.dev/reference/react/use#caveats
1. use re-renders the component after the data is resolved.
Question: Why is useMemo executed again when re-rendering? How to understand re-render here?
2. Promises created in Client Components are recreated on every render.
Question : How to understand this sentence
Demo : https://codesandbox.io/p/sandbox/react-dev-forked-8fpjhd?workspaceId=ws_HRgeaCc4c14UUVZk6sijk9
code:
import { use, Suspense, useMemo } from "react";
function generateRandomString(length) {
let result = "";
const characters =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
const charactersLength = characters.length;
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
let prevPromise = null;
function Message({ messagePromise }) {
if (!messagePromise) {
return <p> messagePromise is null</p>;
}
console.log("render message ");
console.log(
"prevPromise",
prevPromise,
"messagePromise",
messagePromise,
prevPromise === messagePromise
);
prevPromise = messagePromise;
const person = useMemo(() => {
return {
name: generateRandomString(4),
};
}, []);
//The person's name has a different value every time you render. Why??
console.log("person", person);
const messageContent = use(messagePromise);
console.log("after use messagePromise");
return <p>Here is the message: {messageContent}</p>;
}
8 Replies
Why is useMemo executed again when re-rendering? How to understand re-render here?There isn't a mention of useMemo in that article. The main point is that you shouldn't use
use()
in server components. Promises created in Client Components are recreated on every render.Article is suggesting you create the promise from parent component and pass it down to a component like this
const getDataPromise = getData(index)
return <ClientComp getDataPromise={getDataPromise} />
and
const data = use(props.getDataPromise)
Longtail tunaOP
There is no mention of useMemo in the article, but it is just in the demo I provide at https://codesandbox.io/p/sandbox/p3rxyn
This demo shows that useMemo will be executed repeatedly when promise becomes resolved.
This demo shows that useMemo will be executed repeatedly when promise becomes resolved.
Longtail tunaOP
Sorry, my demo link was provided incorrectly. It should actually be this demo link.
https://codesandbox.io/p/sandbox/react-dev-forked-8fpjhd? workspaceId=ws_HRgeaCc4c14UUVZk6sijk9
Focus on the name attribute of the person in the Message component
https://codesandbox.io/p/sandbox/react-dev-forked-8fpjhd? workspaceId=ws_HRgeaCc4c14UUVZk6sijk9
Focus on the name attribute of the person in the Message component
It looks as if useMemo did not successfully cache the person object
There is a link for discussion at https://www.reddit.com/r/reactjs/comments/1by9j0k/how_to_silence_reacts_19_usepromise_warning/
I have a slight understanding, but it is not very in-depth. I still cannot intuitively understand why useMemo will fail. The document does not seem to clearly explain this problem
I have a slight understanding, but it is not very in-depth. I still cannot intuitively understand why useMemo will fail. The document does not seem to clearly explain this problem
Interesting observation
Longtail tunaOP
Is anyone interested in this question?