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

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

[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.

[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.