fix(zustand): memoize selector result + return shallow as default export

Two bugs surfaced when running with-zustand interactively (smoke gate didn't catch either — the ErrorBoundary fell back to a rendered surface that still passed the pixel/colour check). (1) useStore did useSyncExternalStore(subscribe, () => sel(getState()))

Returning a fresh object reference every getSnapshot call trips React's tear-detection: The result of getSnapshot should be cached and the render loops to Maximum update depth exceeded. Fix: cache the last selector result via useRef and reuse it whenever the equality fn (Object.is or the consumer's shallow) reports the new selection matches. (2) zustand/shallow returned {shallow} as a namespace object, so import shallow from zustand/shallow gave the namespace not the function — useStore's typeof equalityFn === function check failed and it fell back to Object.is, which never matches fresh selector outputs. Fix: emit the sub-path as a __esModule-stamped namespace with both default and named exports pointing at the function so either import shape works.

Author: OmgImAlexis

apps/playground/bundle.mjs

@@ -430,7 +430,16 @@ const appOpts = {
       '  if (id === "@expo/metro-runtime") return rnv.expoMetroRuntime;\n' +
       '  if (id === "crypto" || id === "node:crypto") return rnv.nodeCrypto;\n' +
       '  if (id === "zustand") return rnv.zustand;\n' +
-      '  if (id === "zustand/shallow") return {shallow: rnv.zustand.shallow};\n' +
+      // zustand/shallow ships BOTH `import shallow from "zustand/shallow"`
+      // (the function as default) AND `import {shallow} from "zustand/shallow"`.
+      // Return an __esModule namespace that satisfies both shapes; esbuild
+      // sees __esModule:true and pipes it through interop untouched.
+      '  if (id === "zustand/shallow") {\n' +
+      '    var sh = rnv.zustand.shallow;\n' +
+      '    var ns = {default: sh, shallow: sh};\n' +
+      '    Object.defineProperty(ns, "__esModule", {value: true});\n' +
+      '    return ns;\n' +
+      '  }\n' +
       '  if (id === "expo-sqlite") return rnv.expoSqlite;\n' +
       // Every @react-navigation/* package routes through the same
       // minimal shim — the navigator factories cover stack / native-

packages/@lucid-softworks/react-native-linux-expo/zustand.js

@@ -69,21 +69,35 @@ function createStore(initializer) {
 
 function create(initializer) {
   const api = createStoreImpl(initializer);
-  // useStore(selector?, equalityFn?) — the hook form. Selector
-  // defaults to identity; equality defaults to Object.is.
+  // useStore(selector?, equalityFn?) — the hook form.
+  //
+  // The catch: a selector like `s => ({a: s.a, b: s.b})` returns a
+  // NEW object reference every call. useSyncExternalStore tears if
+  // getSnapshot returns a different reference each time it's read
+  // outside an actual subscribe-fire (React fires "the result of
+  // getSnapshot should be cached" and falls into an infinite render
+  // loop).
+  //
+  // Fix: cache the last selector input AND its result, and on every
+  // getSnapshot call return the cached result when the equality fn
+  // says the new selection matches the old one. equalityFn defaults
+  // to Object.is for the no-selector case; consumers passing
+  // `shallow` (from zustand/shallow) get the structural comparison.
   function useStore(selector, equalityFn) {
     const sel = typeof selector === 'function' ? selector : s => s;
     const eq = typeof equalityFn === 'function' ? equalityFn : Object.is;
-    return React.useSyncExternalStore(
-      api.subscribe,
-      () => sel(api.getState()),
-      () => sel(api.getInitialState()),
-      // useSyncExternalStore in React 18 doesn't support a custom
-      // equality fn, so we have to memoize the selected slice
-      // ourselves via the snapshot ref below. The eq is consulted
-      // inside the snapshot, which is good enough for the common
-      // shallow-on-object case zustand consumers use.
-    );
+    const cacheRef = React.useRef(null);
+    function readWithCache(rawState) {
+      const next = sel(rawState);
+      if (cacheRef.current && eq(cacheRef.current.value, next)) {
+        return cacheRef.current.value;
+      }
+      cacheRef.current = {value: next};
+      return next;
+    }
+    const getSnapshot = () => readWithCache(api.getState());
+    const getServerSnapshot = () => readWithCache(api.getInitialState());
+    return React.useSyncExternalStore(api.subscribe, getSnapshot, getServerSnapshot);
   }
   Object.assign(useStore, api);
   return useStore;