Using useRef for Lazy Initialization With React Compiler

Hi,

In the Zustand docs, there is an example of creating a store inside a React component using a well-known technique: lazy initialization with useRef.

Until recently, the recommended approach looked like this:

import { createStore } from '...';

const Component = () => {
  const storeRef = useRef(null);
  if (!storeRef.current) {
    storeRef.current = createStore();
  }
  // ...Now, `storeRef.current` is always available
};

Alternatively, we could have written it like this:

  const store = useRef(createStore()).current;

However, this approach creates a new store on every render but keeps only the first one, discarding the others. If createStore is computationally expensive, this is inefficient. That is why we prefer the lazy initialization technique with useRef.

A Subtle Change for React Compiler

This approach has worked well—until React Compiler came along.

Originally, React Compiler did not support the lazy initialization technique. However, it now does, but with a subtle syntax requirement.

React Compiler requires an explicit check for null or undefined. The previous syntax, using if (!storeRef.current), is not understood because it checks for a falsy value rather than explicitly checking null or undefined.

(If you're not familiar with falsy values, check out this MDN doc.)

The Correct Syntax for React Compiler

To ensure compatibility with React Compiler, use this syntax instead:

const Component = () => {
  const storeRef = useRef(null);
  if (storeRef.current === null) { // '==' instead of '===' works too
    storeRef.current = createStore();
  }
  // ...
};

This works perfectly with React Compiler, and the Zustand docs have been updated accordingly.

Important Note

Even though the previous syntax was not recognized by React Compiler, it did not break anything. The only downside was that React Compiler would not optimize the code.

Happy coding.