Bug: useMemo hook executes twice

I’m using useMemo hook with an empty dependency array in a component withlazy + Suspense, so I expect the function inside useMemo will be called once, but sometimes the function is called twice.

No StrictMode, no rerenders.

useMemo(() => {
  console.log('useMemo');
}, []);

React version: 18.2.0

I can’t reproduce it with version 17.0.2

Steps To Reproduce

Please, take a look at the simplified example. I could reproduce it on a regular basis after I’ve added setState call inside useMemo. As the issue is hard to reproduce, there is a script that reloads the page until the bug appears.

Link to code example: https://codesandbox.io/s/smoosh-forest-g6ft5o

Pay attention, that function in useEffect was called once, which is expected behavior, but useMemo was called twice.

In the real project, there is no setState call inside useMemo and no warnings, but anyway I meet the issue every 10-20 page reloads.

If I delete lazy it works as expected. If I drop LongComponent it works as expected.

The current behavior

The function passed to useMemo is executed twice despite the empty dependency array, and the component wasn’t rerendered.

console:
  useMemo
  useMemo
  useEffect

The expected behavior

The function passed to useMemo is executed only once.

console:
  useMemo
  useEffect

[832bb9]

Same here, I’m using a dependency injection framework factory method inside useMemo to create one instance of a model inside my component, using react 18 triggers useMemo few times for no reason.

Please check this https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily. You can manually save this instance to ref on very first render (or even lazily).

[kolserdav]

This is a real useMemo in React 18.2.0 bug. Here is a simple example where useMemo is triggered twice for each dependency value.

https://codesandbox.io/s/compassionate-swartz-wd3j94?file=/src/App.js

Or is this normal in strict mode?

Yes, I see this is normal https://reactjs.org/docs/strict-mode.html