Next.js 'use client'

[talltyler]

Bug Description

Using useSnapshot in Next.js forces the need for 'use client'

Error: useRef only works in Client Components. Add the "use client" directive at the top of the file to use it. 
Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component

This is using valtio 2.0.0 and next 14.2.13

Reproduction Link

https://stackblitz.com/edit/stackblitz-starters-e425py?file=app%2Fpage.tsx

[dai-shi]

Yes, useSnapshot needs 'use client'. It's a client state.

[talltyler]

So components that are going to be rendered on the server can't get their data from a valtio store or is it that they need to access data in another way?

[dai-shi]

If you have a valtio store and need to get a snapshot, snapshot(store) would do. But, you can directly read store too. Be aware that having the store global means it's a global variable that can be shared across multiple sessions / users.