Bug: useMemo has a problem of executing multiple times without changing dependencies about react

[GmavionR]

about render
const root = createRoot(document.getElementById("root")); root.render(<App />);

[josephsavona]

Thanks for posting! What’s happening here is that useMemo() kicks in only after the component “commits”, when it finishes rendering and first displays to the screen.

If the component renders but ends up suspending — with use(promise) for example — then the useMemo will only memoize once the promise resolves. Subsequent updates will work the same way.

But it looks like you’re trying to create a promise during render. Instead you can fetch in useEffect, or, preferably, use a framework such as Next, Remix or library like react-query to manage data loading.