Hydration errors

[iscekic]

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:08:47 PST 2022; root:xnu-8792.61.2~4/RELEASE_X86_64
Binaries:
  Node: 16.17.1
  npm: 8.15.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 13.1.5
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Data fetching (gS(S)P, getInitialProps), Dynamic imports (next/dynamic)

Link to the code that reproduces this issue

N/A

To Reproduce

I have a couple of components which need to render client-only, eg. components with different layout based on screen width, components displaying stuff like "x seconds ago". For these, I use a helper component rendered at the root:

import { atom, useSetAtom } from "jotai";
import { useEffect } from "react";

// react hydration expects same DOM structure for SSR and initial CSR.
// as we cannot guarantee this for certain data (eg. date/time), we only render that data client-side.
export const clientMountedAtom = atom(false);

export const ClientMountedObserver = () => {
  const setClientMounted = useSetAtom(clientMountedAtom);

  useEffect(() => {
    setClientMounted(true);
  }, [setClientMounted]);

  return null;
};

The clientMountedAtom is then used by these components like this:

export const ClientOnly = () => {
  const clientMounted = useAtomValue(clientMountedAtom);

  // ... logic

  if (!clientMounted) {
    return null;
  }

  return ...;
};

Since updating to the latest version, these components have been causing hydration errors such as:

This suspense boundary received an update before it finished hydrating...

These components are often used in combination with dynamic, so that might also have an influence somehow.

Describe the Bug

See above.

Expected Behavior

No hydration errors (as in previous versions).

Which browser are you using? (if relevant)

N/A

How are you deploying your application? (if relevant)

next start

[staaky]

Might be related to #44083

In my case React 18.3 fixes these hydration errors:

"next": "^13.1.6",
"react": "18.3.0-next-ee8509801-20230117",
"react-dom": "18.3.0-next-ee8509801-20230117",

I'm probably switching back to Next 12 with React 17 though, not going to use react@next in production.

React 18.3 isn't actually fixing the problem, it just supresses the error. The error usually means suboptimal code that has to be wrapped with startTransition. I was able to optimize using the error but still had some edge cases that triggered it. Here's more details on it: facebook/react#24959 (comment)

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.