The latest updates on your projects. Learn more about Vercel for Git ↗︎

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Is it eslint-plugin-react-hooks or eslint-plugin-react-compiler?
I heard that useRef for lazy initialization will be supported by the compiler.

It's react-compiler

│   62:39  error  Ref values (the `current` property) may not be accessed during render.
│ (https://react.dev/reference/react/useRef)  react-compiler/react-compiler

Can you look for official info from the compiler team that recommends useState over useRef for lazy initialization?

I'd say it falls under https://react.dev/learn/referencing-values-with-refs#differences-between-refs-and-state

You shouldn’t read (or write) the current value during rendering.

I think they didn't want to special case 'useRef but you never update .current', and they would rather recommend 'useState without ever callling the setter' for immutable data which is used during render.

I would like to see if it's officially unsupported with the compiler. Maybe we should wait for the compiler to be out of the experimental phase.

Looks like it's being discussed, I asked a question here: facebook/react#30843 (comment)

The compiler does support this pattern, but you have to specifically check that against null, ie if (ref.current == null) { /* lazy init */ }

The compiler does support this pattern, but you have to specifically check that against null, ie if (ref.current == null) { /* lazy init */ }

Cool. Does it work with === undefined too? (Or, === null if it's initialized with null)

Yes, that's right

Does it work with === undefined too? (Or, === null if it's initialized with null)

As I tried in the playground, == null and === null works, but === undefined does not.

Happy to make this change, but curious as to the rationale. Do refs provide a benefit over state? state provides:

• a built-in API for lazy initialisation, rather than a manual check
• the 'correct' way to consume values at render-time (see docs: strict null check in createContext example #2995 (comment)). Concretely, this means that it's clearly supported as per the docs, rather than, it's recommended not to do this, but a dev told is it was OK (as long as we use a very specific incantation!)

The rationale is that useRef should be more lightweight than useState. We don't need "state" that changes over time, but just a stable reference.

Having that said, I'm fine to recommend useState as best practice with React Compiler. I think there should be a dedicated guide, not in docs/previous-versions/zustand-v3-create-context.md.
This document is about the migration from v3, so I would like to avoid changes. So, for now, I would like to change it as #2995 (comment). Please note that I may change my mind in the future.

Makes sense! Pushed, edited description + title.

Open in Stackblitz • demo • starter

npm i https://pkg.pr.new/zustand@2995

commit: 3a258df