with mobx bug

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
Binaries:
  Node: 20.6.0
  npm: N/A
  Yarn: N/A
  pnpm: 8.11.0
Relevant Packages:
  next: 14.1.1-canary.20 // Latest available version is detected (14.1.1-canary.20).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

Which example does this report relate to?

with-mobx

What browser are you using? (if relevant)

Chrome 120.0.6099.225

How are you deploying your application? (if relevant)

No response

Describe the Bug

When changing query parameters, multiple renderings occur, when the mobx state is hydrated

Expected Behavior

hydration does not cause additional app renderings

To Reproduce

link reproduce - https://codesandbox.io/p/github/realing29/next_mobx_ssr_hydration_bug/main?file=%2Fcomponents%2FStoreProvider.js%3A25%2C39
When changing the route from 1 to 2, more than 20 renderings occurred

video
https://github.com/vercel/next.js/assets/36142237/87252a43-3e56-43b2-b8d6-b5a7115c9856

the current solution is to replace the initialize Store function with:

function initializeStore(initialData = null) {
  const _store = store ?? new Store();

  const isFirstRenderRef = useRef(true);
  if (isFirstRenderRef.current) {
    _store.hydrate(initialData);
  }

  useEffect(() => {
    if (!isFirstRenderRef.current) {
      if (initialData) {
        _store.hydrate(initialData);
      }
    } else {
      isFirstRenderRef.current = false;
    }
  }, [_store, initialData]);


  if (typeof window === "undefined") return _store;

  if (!store) store = _store;
  return _store;
}

Start with the linked CodeSandbox reproduction and inspect components/StoreProvider.js around lines 25 and 39, then reproduce the route change from 1 to 2. Compare the render count while MobX state is hydrated; done means changing query parameters no longer causes the reported extra renderings.