Will React Compiler (from React 19) affect Zustand in any way?

[rodrigocfd]

The announcement of React compiler with the upcoming React 19 is generating a lot of discussion, due to how it will eliminate the need for manual memoization. I'm trying it myself, and I'm very impressed with the results. Out of the box optimization is not something we're used to in React land.

So now I'm wondering, @dai-shi: will this React Compiler affect Zustand in some way, either its external API or its internal implementation?

[dai-shi]

I don't think so. It should just work fine.

[DhtIsCoding]

@KarimBenSmida would you mind sharing us a minimal repro on stactkblitz?

I create a minimal repro: https://stackblitz.com/edit/vitejs-vite-cpk7jgkk?file=src%2FApp.tsx.

[dai-shi]

playground. Hmm, the compiled code doesn't check the change. This doesn't even include Zustand.

[dai-shi]

Oh!!!!! I found it.

-   const isFullScreen = usefullScreenStore((state) => state.isFullScreen);
+   const isFullScreen = useFullScreenStore((state) => state.isFullScreen);

😄

[DhtIsCoding]

Oh!!!!! I found it.

-   const isFullScreen = usefullScreenStore((state) => state.isFullScreen);
+   const isFullScreen = useFullScreenStore((state) => state.isFullScreen);

😄

This is really an interesting bug. Thank you very much for taking the time to answer it.

[secure12]

This answer is wrong. It works fine only if you name all your stores with the use prefix, which of course is the documented convention, but it becomes necessary with react compiler.
If use prefix is not used, react may complain that hooks are called conditionally.

[Germano123]

I'm having the same problem installing Next 19.

For a minimal project just instal latest version.

[bviebahn]

It looks like auto-generating the selectors as described in the docs (https://zustand.docs.pmnd.rs/guides/auto-generating-selectors) is causing some issues with React compiler. See https://stackblitz.com/edit/vitejs-vite-vemxbafj?file=src%2FApp.tsx

Using useStore(store => store.bears) works, but using the generated selector useStore.use.bears() causes this error:

Uncaught Error: Should have a queue. You are likely calling Hooks conditionally, which is not allowed. (https://react.dev/link/invalid-hook-call)

For some reason when I was debugging this yesterday I was getting a different error:
TypeError: Cannot read properties of undefined (reading 'next')
but today I'm only seeing the first one 🤷‍♂️

Notice that these errors are not happening on the line that uses the generator, but on the next line that is calling a hook. I'll probably just switch to not using the autogenerated selectors, unless someone has a workaround?

[dai-shi]

As I understand the, problem is .use. useStore.hooks.bears() would work for example. But, in any case, they are not recognized as React hooks, so it may not be a good pattern in the modern React.

[htmlin]

As I understand the, problem is .use. useStore.hooks.bears() would work for example. But, in any case, they are not recognized as React hooks, so it may not be a good pattern in the modern React.据我所知，问题在于 .use。例如，useStore.hooks.bears() 会起作用。但无论如何，它们没有被识别为 React hooks，所以在现代 React 中这可能不是一个好的模式。

useStore.hooks.bears() doesn't work either. And useStore.use.bears() doesn't always fail — sometimes it can compile successfully

[dai-shi]

Oh, yeah. How about useStore.hooks.useBears()?

Either way, I don't think auto generated selectors are generally a recommended pattern with the compiler.

[htmlin]

How about useStore.hooks.useBears()?

✅ It works

[danielrose7]

I was having issues with direct destructuring a la

// BREAKS (worked without react compiler)
const { foo, bar } = useMyStore() 

// OK
const myStore = useMyStore(state => state)
const { foo, bar } = myStore;

// OK + more efficient
import { useShallow } from 'zustand/react/shallow';
...
const { foo, bar } =
    useShoppingCartStore(
      useShallow((state) => ({
        foo: state.foo,
        bar: state.bar,
      })),
    );

Added a custom lint rule to resolve

module.exports = {
  create(context) {
    return {
      VariableDeclarator(node) {
        // Check if we have a destructuring pattern on the left side
        if (node.id.type !== 'ObjectPattern') {
          return;
        }

        // Check if the right side is a call expression
        if (!node.init || node.init.type !== 'CallExpression') {
          return;
        }

        const callee = node.init.callee;

        // Check if it's calling a function that matches useXxxStore pattern
        if (callee.type !== 'Identifier' || !callee.name.match(/^use\w+Store$/)) {
          return;
        }

        // Check if the hook is called without arguments (no selector)
        // OR if it's not using useShallow
        // This is the problematic pattern with React Compiler
        const hasNoArgs = node.init.arguments.length === 0;
        const hasUseShallow =
          node.init.arguments.length > 0 &&
          node.init.arguments[0].type === 'CallExpression' &&
          node.init.arguments[0].callee.type === 'Identifier' &&
          node.init.arguments[0].callee.name === 'useShallow';

        if (hasNoArgs || (node.init.arguments.length > 0 && !hasUseShallow)) {
          context.report({
            data: {
              storeName: callee.name,
            },
            fix(fixer) {
              const sourceCode = context.getSourceCode();
              const destructurePattern = node.id;
              const storeHookName = callee.name;

              // Extract the property names from the destructuring pattern
              const properties = destructurePattern.properties
                .map((prop) => {
                  if (prop.type === 'Property' && prop.key.type === 'Identifier') {
                    return prop.key.name;
                  }
                  return null;
                })
                .filter(Boolean);

              // Build the useShallow selector
              const selectorObject = properties
                .map((propName) => `${propName}: state.${propName}`)
                .join(',\n    ');

              const destructureText = sourceCode.getText(destructurePattern);

              // Replace the entire variable declaration
              const declaration = node.parent;
              const declarationText = sourceCode.getText(declaration);
              const declarationKeyword = declarationText.split(' ')[0]; // 'const', 'let', or 'var'

              const fixes = [
                fixer.replaceText(
                  declaration,
                  `${declarationKeyword} ${destructureText} = ${storeHookName}(\n  useShallow((state) => ({\n    ${selectorObject},\n  }))\n);`,
                ),
              ];

              // Check if useShallow is already imported
              const programNode = sourceCode.ast;
              const hasUseShallowImport = programNode.body.some(
                (statement) =>
                  statement.type === 'ImportDeclaration' &&
                  statement.source.value === 'zustand/react/shallow' &&
                  statement.specifiers.some(
                    (spec) => spec.type === 'ImportSpecifier' && spec.imported.name === 'useShallow',
                  ),
              );

              // Add import if not already present
              if (!hasUseShallowImport) {
                // Find the last import statement before any @ imports
                let lastNonLocalImport = null;
                for (const statement of programNode.body) {
                  if (statement.type === 'ImportDeclaration') {
                    if (!statement.source.value.startsWith('@')) {
                      lastNonLocalImport = statement;
                    }
                  } else if (lastNonLocalImport) {
                    // We've passed all imports
                    break;
                  }
                }

                if (lastNonLocalImport) {
                  fixes.push(
                    fixer.insertTextAfter(
                      lastNonLocalImport,
                      "\nimport { useShallow } from 'zustand/react/shallow';",
                    ),
                  );
                }
              }

              return fixes;
            },
            messageId: 'no-direct-zustand-destructure',
            node,
          });
        }
      },
    };
  },
  meta: {
    docs: {
      category: 'Best Practices',
      description:
        'Require useShallow when destructuring from Zustand store hooks (React Compiler compatibility)',
      recommended: true,
    },
    fixable: 'code',
    messages: {
      'no-direct-zustand-destructure':
        "Use useShallow when destructuring from {{storeName}}. Direct destructuring breaks reactivity with React Compiler. Use: import { useShallow } from 'zustand/react/shallow'; then {{storeName}}(useShallow((state) => ({ ... })))",
    },
  },
  rule: 'no-direct-zustand-destructure',
};