Why useAtom in client component causes hydrate same component twice?

[baeharam]

Test Environment

• Next.js 14.2.3 app router
• jotai 2.8.2

When I use useAtom in client component and setter in rendering process, it hydrates same component twice.
Why this kind of issue occurs?

'use client';

const countAtom = atom(0);

const Test = ({ children }: React.PropsWithChildren) => {
  const [count, setCount] = useAtom(countAtom);
  
  if (count === 0) {
    setCount(1);
  }

  return count === 0 ? null : <>{children}</>
}

This client component code inserted into RSC(layout.tsx of Next.js). When I run npm run dev and refresh several times, it renders 2 component in same page.

⬇️ Reproduction & Video

Reproduction Video
reproduction.mov

CodeSandbox ➡️

Did I something wrong?

Thanks for reading!

[dai-shi]

I don't know...

But,

  if (count === 0) {
    setCount(1);
  }

it may violate rules of React. It's safer to use useEffect.

  useEffect(() => {
    if (count === 0) {
      setCount(1);
    }
  })

[baeharam]

@dai-shi

I already solved it using by useEffect. But, what I wanna know is that why useAtom triggers this problem.
useState doesn't make this problem... 🤔