useHydrateAtoms causes hydration mismatch!

[siamahnaf]

I am trying to implement jotai in my application. Its totally basic implementation.

Next.js

//Components
import TaskRoot from "@/components/my-task/TaskRoot";

//Trpc
import { trpc } from "@/trpc/server";

const Page = async () => {
    //Trpc
    const data = await trpc.task.list();

    return (
        <div className="h-full">
            <TaskRoot data={data} />
        </div>
    );
};

export default Page;

Here I am simply fetching data, passing to client component-

Then on TaskRoot component-

"use client"
import { Fragment } from "react";

//Atom
import { useAtomValue } from "jotai";
import { useHydrateAtoms } from "jotai/utils"
import { taskAtom, tabAtom } from "./_atom/task.atom";

//Interface
import { TTaskType } from "./_types/task.types";
interface Props {
    data: TTaskType;
}

const TaskRoot = ({ data }: Props) => {
    //Hydrate Atom
    useHydrateAtoms([[taskAtom, data]]);

    //Atom Tab
    const tab = useAtomValue(tabAtom);

    return (
        <Fragment>
            {....my Contnet}
        </Fragment>
    );
};

export default TaskRoot;

I am creating all atom in one place-

import { atom } from "jotai";

//Types
import { TabType, TTaskType, ActiveType, SelectedType, SectionEditType } from "../_types/task.types";

//Creating Atom
export const tabAtom = atom<TabType>("board");
export const taskAtom = atom<TTaskType>([]);
export const activeAtom = atom<ActiveType>(null);
export const selectAtom = atom<SelectedType>(null);
export const saveAtom = atom<boolean>(false);
export const editAtom = atom<SectionEditType>(null);

Note: I found A discussion on it-

#3052

But that discussion mostly about Provider. But in my project I am not using Provider, instead I am using defaultStore. I am using getDefaultStore in my project different place(Not on component) which is awesome. The only fix I get that is use -

dangerouslyForceHydrate: true

So with this options, I get some different issues. So my main question is why useHydrateAtoms creating UI mismatch?

[siamahnaf]

If you watch the video. task 5 and task 6 was serially. And then I reorder it now task 6 and task 5 data. On refresh, somehow it keeping before updating state snapshot, then in first render it get the update data. Why it keeping previous state snapshots.

Screen.Recording.2026-01-30.at.8.34.57.PM.mov

[dai-shi]

Do you use <Provider>? Could you create a minimal reproduction?

[siamahnaf]

Hello, @dai-shi , thanks for replying.

As I said, actually I am not using Provider. Because I like the defaultStore function from where I am getting access of state or setting state outside of react component without passing props, in my real project. So thats why I am not creating any store or using Provider.

I create a minimal reproduction-

https://github.com/siamahnaf/hydration-mismatch

Please try it in your machine. Steps-

1. pnpm i
2. pnpm dev

Create a .env.local file in root and using following environment variable-

DATABASE_URL="postgresql://neondb_owner:npg_9dfFbRGa2OwH@ep-autumn-field-a1fjqumr-pooler.ap-southeast-1.aws.neon.tech/neondb?sslmode=require&channel_binding=require"

I also deployed it into vercel. In production you will see the the updated data not hydrating instead it always hydrating previous state snapshots.

Please watch following video-

Screen.Recording.2026-01-31.at.12.10.58.PM.mov

@dai-shi , also I am getting a console warning each time-

Detected multiple Jotai instances. It may cause unexpected behavior with the default store. https://github.com/pmndrs/jotai/discussions/2044

Although I am not sharing or using getDefaultStore in this reproduction repo.

[dai-shi]

Unfortunately, your reproduction isn't minimal at all. Reduce files and lines as much as possible until the problem doesn't disappear.

[siamahnaf]

I think not I can reduce more lines or files to keep the issues! It is the best minimal, I tried.

[dai-shi]

actually I am not using Provider

useHydrateAtoms doesn't work correctly with the default store on the server env.
Let me know if adding Provider fixes your issue, or not.

[siamahnaf]

Is Provider with new store? or only Provider

[dai-shi]

Only Provider. Put it close to the root.

[siamahnaf]

Yea it solve the issues. But I have one small questions-

While I add Provider-

const store = getDefaultStore();

its not working. I know and I understand it should not work. Then what is other way to get store outside of react component.

[dai-shi]

You can't because on the server you have multiple React trees in the memory basically. So, const store = useStore() will be only the way to get the store from the React tree.

[siamahnaf]

Yea, got that. Thanks @dai-shi! I resolve all with your help.!