Next.js 13 - Jotai's useHydrateAtoms hook causes UI mismatch

Question

Working with Next.js 13 projects using the new application catalog and jotai as the global state manager. Now I'm trying to use the useHydrateAtoms hook to pass the initial state to my atoms as shown in the official documentation, but this results in a hydration error.

The following is a simplified version of the code currently used, which passes the data received from the server-side component to the client-side component that calls useHydrateAtoms and uses useAtom Read and write from this atom.

Server Component (Page)

const getData = async () => {
 // ...
}

export default async function Page() {
  const data = await getData();
  return <ChildComponent initialState={data} />;
}

Client component

"use client";

export function ChildComponent({ initialState }) {
  useHydrateAtoms([[myAtom, initialState]]);
  const [data, setData] = useAtom(myAtom);
  return <>{data.id}</>;
}

The error completely disappears when I dynamically import the subcomponent using next/dynamic and set the SSR option to false or remove the useHydrateAtoms hook, but both Both solutions defeat the purpose of this implementation.

How do I provide an initial state to my atom using a value from the server so that the atom is not null on the first client render?

Answer 1

I discovered that useHydrateAtoms The hook itself is not the problem, it is a client component that accesses the state of different parts of the UI dynamically imported via next/dynamic ssr options set to false. This causes the value displayed by the component to change on the first render, resulting in a UI mismatch.

How to fix the error

Simply move the component that calls useHydrateAtoms to the top of the component tree, this will ensure that all child components will be rendered with the correct values.