React 18: Updating state in an effect during mount causes hydration mismatch

[eps1lon]

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

• React: 18.0.0-alpha-88d121899-20210811
• ReactDOM: 18.0.0-alpha-88d121899-20210811
• Redux: 4.1.1
• React Redux: 7.2.4

What is the current behavior?

When updating the store in an effect outside of a Suspense boundary, hydration mismatches are reported for components reading from the store inside Suspense boundaries.

Warning: Prop `className` did not match. Server: "language-js" Client: "language-ts"

Components reading the store outside of Suspense boundaries issue no hydration mismatches.

<Store>
  <Suspense fallback={null}>
    <Demo>inside suspense has hydration mismatch</Demo>
  </Suspense>
  <Demo>outside suspense has no hydration mismatch</Demo>
  <UpdatesStore />
</Store>

Example: https://codesandbox.io/s/react-18-updating-state-in-an-effect-during-mount-causes-hydration-mismatch-w7tjt?file=/src/App.js:2208-2372

The codesandbox includes an implementation using React Context as well where no problem is reported.

What is the expected behavior?

No hydration mismatches.

Which browser and OS are affected by this issue?

Chrome 92, Ubuntu 20.04

Did this work in previous versions of React Redux?

• Yes

[markerikson]

I'm kind of confused by the "hydration" wording here. Is this SSR-related, or purely client-side?

[timdorr]

This seems like a React bug, not a React Redux bug. The fact that Suspense is delaying the hydration until after the effects run doesn't seem like anything we can control on our end.

If the data on context is out of sync at that point, it would be up to React to be providing the prior value, or to not complain about hydration mismatches in suspended subtrees.

[eps1lon]

I'm kind of confused by the "hydration" wording here. Is this SSR-related, or purely client-side?

SSR-related as shown in the codesandbox.

This seems like a React bug, not a React Redux bug.

Given that I see no hydration warnings using React Context, I don't believe this is a React bug. But if you can reproduce the same issue with just React, we can file it against the React repository.

[markerikson]

I'd kinda like to see if this is reproducible with anything non-Redux-related.

[eps1lon]

I'd kinda like to see if this is reproducible with anything non-Redux-related.

Is this something I should do? Because I already tried with just React Context without success. At this point I'd have to dig into how react-redux works.

[markerikson]

If you could, yes, please.

I certainly don't have time or priority to look into this myself.

My question is whether this is likely unrelated to Redux or React-Redux, and rather something about a non-React-based external store. Like, try doing this with Zustand, Mobx, Jotai, and Redux-Zero, or even a minimal Redux store and hand-written subscription, and see if any of them exhibit similar behavior.

[timdorr]

The only thing I could think of is our use of useLayoutEffect. But even then, that would be a React bug, not our own.

[eps1lon]

Reduced the issue to redux + useSyncExternalStore (the shim though): https://codesandbox.io/s/react-18-updating-state-in-an-effect-during-mount-causes-hydration-mismatch-uses-m6lwm?file=/src/App.js

Will revisit once facebook/react#22239 lands. The shim triggers a warning that it doesn't support React 18:

Warning: You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release.

[eps1lon]

Closing since this issue caused by author error not library error: facebook/react#22361 (comment)