SSR Usage - useHydrateAtoms hook causes a UI missmatch

[fabio-nettis]

Working on a Next.js 13 project using the new app directory and jotai as global state manager. Now I am trying to pass an initial state to my atoms using the useHydrateAtoms hook as seen in the official documentation, but this causes a hydration error.

Following is an simplified version of the code that is currently used, it passes the data received from the server side component to a client component that calls useHydrateAtoms and uses useAtom to read and write from/to that 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}</>;
}

When I dynamically import the child component using next/dynamic with the SSR option set to false or I remove the useHydrateAtoms hook, the error disappears completely but both of those solutions defy the purpose of this implementation.

If not like this, how can one provide an initial state to an atom with a value from the server, so the atom is not null upon the first client side render?

[dai-shi]

How can one provide an initial state to my atom with a value from the server so the atom is not null upon the first client side render?

Is it null? because, your usage seems correct.

Can anyone help on this?

[dai-shi]

Does the error show what is the expected value?

[fabio-nettis]

The value is set. Yes. But as I said, a hydration error is thrown right after the atoms population.

[wootra]

is it resolved? @fabio-nettis if it is, can you share why it is closed? it will be a great opportunity for the jotai users.

[fabio-nettis]

@wootra I have discovered that the useHydrateAtoms hook was not the issue per-se, but if understood correctly it was a client component accessing the state in a different part of the UI imported dynamically via next/dynamic with the ssr option set to false. This caused the value displayed by the component to change on first render, what in return caused a UI mismatch.

How to I fixed the error

Simply move the component that calls useHydrateAtoms to the top of the component tree, this will ensure that all children will render with the correct value.