Merge pull request #30 from udecode/fix/stable-useNameStore

Memorize return value of `use<Name>Store`

Author: zbeyens

.changeset/blue-moose-hug.md

@@ -0,0 +1,5 @@
+---
+'jotai-x': patch
+---
+
+Fix: Return value of `use<Name>Store` is not memorized

packages/jotai-x/src/createAtomStore.spec.tsx

@@ -1102,6 +1102,14 @@ describe('createAtomStore', () => {
       expect(getByText('Change Callback new')).toBeInTheDocument();
       expect(getByText('useBecameFriends: true')).toBeInTheDocument();
     });
+
+    it('returns a stable store from useNameStore', () => {
+      const { result, rerender } = renderHook(useMyTestStoreStore);
+      const first = result.current;
+      rerender();
+      const second = result.current;
+      expect(first === second).toBeTruthy();
+    });
   });
 
   describe('scoped providers', () => {

packages/jotai-x/src/createAtomStore.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { getDefaultStore, useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { selectAtom, useHydrateAtoms } from 'jotai/utils';
 
@@ -473,6 +473,15 @@ const convertScopeShorthand = (
     ? { scope: optionsOrScope }
     : optionsOrScope;
 
+const useConvertScopeShorthand: typeof convertScopeShorthand = (
+  optionsOrScope
+) => {
+  const convertedOptions = convertScopeShorthand(optionsOrScope);
+  // Works because all values are primitives
+  // eslint-disable-next-line react-compiler/react-compiler
+  return useMemo(() => convertedOptions, Object.values(convertedOptions));
+};
+
 const identity = (x: any) => x;
 
 export interface CreateAtomStoreOptions<
@@ -755,118 +764,121 @@ Please wrap them with useCallback or configure the deps array correctly.`
   };
 
   const useStoreApi: UseStoreApi<T, E> = (options = {}) => {
-    const scopedOptions = convertScopeShorthand(options);
-    const store = useStore(scopedOptions);
-
-    return {
-      // store.use<Key>Value()
-      ...(withStoreAndOptions(
-        atomsOfUseValue,
-        getUseValueIndex,
-        store,
-        scopedOptions
-      ) as UseKeyValueApis<MyStoreAtoms>),
-      // store.get<Key>()
-      ...(withStoreAndOptions(
-        atomsOfGet,
-        getGetIndex,
-        store,
-        scopedOptions
-      ) as GetKeyApis<MyStoreAtoms>),
-      // store.useSet<Key>()
-      ...(withStoreAndOptions(
-        atomsOfUseSet,
-        getUseSetIndex,
-        store,
-        scopedOptions
-      ) as UseSetKeyApis<MyStoreAtoms>),
-      // store.set<Key>(...args)
-      ...(withStoreAndOptions(
-        atomsOfSet,
-        getSetIndex,
-        store,
-        scopedOptions
-      ) as SetKeyApis<MyStoreAtoms>),
-      // store.use<Key>State()
-      ...(withStoreAndOptions(
-        atomsOfUseState,
-        getUseStateIndex,
-        store,
-        scopedOptions
-      ) as UseKeyStateApis<MyStoreAtoms>),
-      // store.subscribe<Key>(callback)
-      ...(withStoreAndOptions(
-        atomsOfSubscribe,
-        getSubscribeIndex,
-        store,
-        scopedOptions
-      ) as SubscribeKeyApis<MyStoreAtoms>),
-      // store.useValue('key')
-      useValue: withKeyAndStoreAndOptions(
-        atomsOfUseValue,
-        store,
-        scopedOptions
-      ) as UseParamKeyValueApi<MyStoreAtoms>,
-      // store.get('key')
-      get: withKeyAndStoreAndOptions(
-        atomsOfGet,
-        store,
-        scopedOptions
-      ) as GetParamKeyApi<MyStoreAtoms>,
-      // store.useSet('key')
-      useSet: withKeyAndStoreAndOptions(
-        atomsOfUseSet,
-        store,
-        scopedOptions
-      ) as UseSetParamKeyApi<MyStoreAtoms>,
-      // store.set('key', ...args)
-      set: withKeyAndStoreAndOptions(
-        atomsOfSet,
-        store,
-        scopedOptions
-      ) as SetParamKeyApi<MyStoreAtoms>,
-      // store.useState('key')
-      useState: withKeyAndStoreAndOptions(
-        atomsOfUseState,
-        store,
-        scopedOptions
-      ) as UseParamKeyStateApi<MyStoreAtoms>,
-      // store.subscribe('key', callback)
-      subscribe: withKeyAndStoreAndOptions(
-        atomsOfSubscribe,
-        store,
-        scopedOptions
-      ) as SubscribeParamKeyApi<MyStoreAtoms>,
-      // store.useAtomValue(atomConfig)
-      useAtomValue: ((atomConfig, selector, equalityFnOrDeps, deps) =>
-        // eslint-disable-next-line react-compiler/react-compiler
-        useAtomValueWithStore(
-          atomConfig,
+    const convertedOptions = useConvertScopeShorthand(options);
+    const store = useStore(convertedOptions);
+
+    return useMemo(
+      () => ({
+        // store.use<Key>Value()
+        ...(withStoreAndOptions(
+          atomsOfUseValue,
+          getUseValueIndex,
           store,
-          scopedOptions,
-          selector,
-          equalityFnOrDeps,
-          deps
-        )) as UseAtomParamValueApi,
-      // store.getAtom(atomConfig)
-      getAtom: (atomConfig) =>
-        getAtomWithStore(atomConfig, store, scopedOptions),
-      // store.useSetAtom(atomConfig)
-      useSetAtom: (atomConfig) =>
-        // eslint-disable-next-line react-compiler/react-compiler
-        useSetAtomWithStore(atomConfig, store, scopedOptions),
-      // store.setAtom(atomConfig, ...args)
-      setAtom: (atomConfig) =>
-        setAtomWithStore(atomConfig, store, scopedOptions),
-      // store.useAtomState(atomConfig)
-      useAtomState: (atomConfig) =>
-        // eslint-disable-next-line react-compiler/react-compiler
-        useAtomStateWithStore(atomConfig, store, scopedOptions),
-      // store.subscribeAtom(atomConfig, callback)
-      subscribeAtom: (atomConfig) =>
-        subscribeAtomWithStore(atomConfig, store, scopedOptions),
-      store,
-    };
+          convertedOptions
+        ) as UseKeyValueApis<MyStoreAtoms>),
+        // store.get<Key>()
+        ...(withStoreAndOptions(
+          atomsOfGet,
+          getGetIndex,
+          store,
+          convertedOptions
+        ) as GetKeyApis<MyStoreAtoms>),
+        // store.useSet<Key>()
+        ...(withStoreAndOptions(
+          atomsOfUseSet,
+          getUseSetIndex,
+          store,
+          convertedOptions
+        ) as UseSetKeyApis<MyStoreAtoms>),
+        // store.set<Key>(...args)
+        ...(withStoreAndOptions(
+          atomsOfSet,
+          getSetIndex,
+          store,
+          convertedOptions
+        ) as SetKeyApis<MyStoreAtoms>),
+        // store.use<Key>State()
+        ...(withStoreAndOptions(
+          atomsOfUseState,
+          getUseStateIndex,
+          store,
+          convertedOptions
+        ) as UseKeyStateApis<MyStoreAtoms>),
+        // store.subscribe<Key>(callback)
+        ...(withStoreAndOptions(
+          atomsOfSubscribe,
+          getSubscribeIndex,
+          store,
+          convertedOptions
+        ) as SubscribeKeyApis<MyStoreAtoms>),
+        // store.useValue('key')
+        useValue: withKeyAndStoreAndOptions(
+          atomsOfUseValue,
+          store,
+          convertedOptions
+        ) as UseParamKeyValueApi<MyStoreAtoms>,
+        // store.get('key')
+        get: withKeyAndStoreAndOptions(
+          atomsOfGet,
+          store,
+          convertedOptions
+        ) as GetParamKeyApi<MyStoreAtoms>,
+        // store.useSet('key')
+        useSet: withKeyAndStoreAndOptions(
+          atomsOfUseSet,
+          store,
+          convertedOptions
+        ) as UseSetParamKeyApi<MyStoreAtoms>,
+        // store.set('key', ...args)
+        set: withKeyAndStoreAndOptions(
+          atomsOfSet,
+          store,
+          convertedOptions
+        ) as SetParamKeyApi<MyStoreAtoms>,
+        // store.useState('key')
+        useState: withKeyAndStoreAndOptions(
+          atomsOfUseState,
+          store,
+          convertedOptions
+        ) as UseParamKeyStateApi<MyStoreAtoms>,
+        // store.subscribe('key', callback)
+        subscribe: withKeyAndStoreAndOptions(
+          atomsOfSubscribe,
+          store,
+          convertedOptions
+        ) as SubscribeParamKeyApi<MyStoreAtoms>,
+        // store.useAtomValue(atomConfig)
+        useAtomValue: ((atomConfig, selector, equalityFnOrDeps, deps) =>
+          // eslint-disable-next-line react-compiler/react-compiler
+          useAtomValueWithStore(
+            atomConfig,
+            store,
+            convertedOptions,
+            selector,
+            equalityFnOrDeps,
+            deps
+          )) as UseAtomParamValueApi,
+        // store.getAtom(atomConfig)
+        getAtom: (atomConfig) =>
+          getAtomWithStore(atomConfig, store, convertedOptions),
+        // store.useSetAtom(atomConfig)
+        useSetAtom: (atomConfig) =>
+          // eslint-disable-next-line react-compiler/react-compiler
+          useSetAtomWithStore(atomConfig, store, convertedOptions),
+        // store.setAtom(atomConfig, ...args)
+        setAtom: (atomConfig) =>
+          setAtomWithStore(atomConfig, store, convertedOptions),
+        // store.useAtomState(atomConfig)
+        useAtomState: (atomConfig) =>
+          // eslint-disable-next-line react-compiler/react-compiler
+          useAtomStateWithStore(atomConfig, store, convertedOptions),
+        // store.subscribeAtom(atomConfig, callback)
+        subscribeAtom: (atomConfig) =>
+          subscribeAtomWithStore(atomConfig, store, convertedOptions),
+        store,
+      }),
+      [store, convertedOptions]
+    );
   };
 
   const useNameState = <K extends keyof StoreAtoms<T, E>>(