fix: remove useMemo from store built-in hooks (#16)

Author: pedronauck

.changeset/gentle-trains-brush.md

@@ -0,0 +1,5 @@
+---
+'@fuels/react-xstore': patch
+---
+
+Fix: remove `useMemo` from built-in hooks inside store.

package.json

@@ -18,6 +18,7 @@
   ],
   "scripts": {
     "build": "turbo run build",
+    "build:watch": "pnpm -r --parallel build --watch",
     "changeset": "changeset",
     "changeset:check": "changeset status --since=origin/main",
     "changeset:release": "changeset publish --no-git-tag",
@@ -39,22 +40,22 @@
   "devDependencies": {
     "@jest/types": "^29.6.3",
     "@types/jest": "^29.5.4",
-    "@types/node": "^20.5.4",
+    "@types/node": "^20.5.9",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@xstate/cli": "^0.5.2",
     "dotenv": "^16.3.1",
-    "eslint": "^8.47.0",
+    "eslint": "^8.48.0",
     "husky": "^8.0.3",
     "jest": "29.6.4",
     "lint-staged": "^14.0.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.2",
+    "prettier": "^3.0.3",
     "ts-node": "^10.9.1",
     "tsup": "^7.2.0",
     "turbo": "^1.10.13",
     "typescript": "5.2.2",
-    "updates": "^14.3.5"
+    "updates": "^14.5.0"
   },
   "dependencies": {
     "@changesets/changelog-github": "^0.4.8",

packages/changeset/package.json

@@ -13,6 +13,6 @@
     "dotenv": "^16.3.1"
   },
   "devDependencies": {
-    "@types/node": "^20.5.4"
+    "@types/node": "^20.5.9"
   }
 }

packages/eslint-plugin/package.json

@@ -17,24 +17,24 @@
     "typescript"
   ],
   "peerDependencies": {
-    "eslint": "^8.47.0"
+    "eslint": "^8.48.0"
   },
   "dependencies": {
     "@next/eslint-plugin-next": "^13.4.19",
-    "@typescript-eslint/eslint-plugin": "^6.4.1",
-    "@typescript-eslint/parser": "^6.4.1",
-    "eslint": "^8.47.0",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
+    "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-node": "^0.3.9",
     "eslint-import-resolver-typescript": "^3.6.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jest-dom": "^5.0.2",
+    "eslint-plugin-jest-dom": "^5.1.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^6.0.1",
-    "prettier": "^3.0.2"
+    "prettier": "^3.0.3"
   }
 }

packages/jest/package.json

@@ -62,7 +62,7 @@
     "@fuels/ts-config": "workspace:*",
     "@fuels/tsup-config": "workspace:*",
     "@jest/types": "^29.6.3",
-    "@swc/core": "^1.3.78",
+    "@swc/core": "^1.3.82",
     "@swc/jest": "^0.2.29",
     "@types/jest-axe": "^3.5.5"
   },

packages/prettier-config/package.json

@@ -5,9 +5,9 @@
   "main": "./index.json",
   "access": "public",
   "dependencies": {
-    "prettier": "^3.0.2"
+    "prettier": "^3.0.3"
   },
   "peerDependencies": {
-    "prettier": "^3.0.2"
+    "prettier": "^3.0.3"
   }
 }

packages/react-xstore/package.json

@@ -37,7 +37,7 @@
     "@xstate/inspect": "^0.8.0",
     "@xstate/react": "^3.2.2",
     "fast-equals": "^5.0.1",
-    "jotai": "^2.4.0",
+    "jotai": "^2.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "uuid": "^9.0.0",
@@ -48,7 +48,7 @@
     "@fuels/ts-config": "workspace:*",
     "@fuels/tsup-config": "workspace:*",
     "@testing-library/react": "^14.0.0",
-    "@types/uuid": "^9.0.2",
+    "@types/uuid": "^9.0.3",
     "jest-localstorage-mock": "^2.4.26"
   }
 }

packages/react-xstore/src/ReactFactory.test.tsx

@@ -30,6 +30,7 @@ describe('ReactFactory', () => {
     const { result } = renderHook(() => {
       return store.useSelector('todos', (state) => state.context.todos);
     }, opts);
+
     expect(result.current).toEqual([payload]);
     expect(spy).toBeCalledTimes(1);
 

packages/react-xstore/src/ReactFactory.tsx

@@ -1,7 +1,7 @@
 import { useSelector as useSelectorRef } from '@xstate/react';
-import { Provider, useAtom, useAtomValue } from 'jotai';
+import { Provider, useAtom, useAtomValue, useSetAtom } from 'jotai';
 import type { ReactNode } from 'react';
-import { useMemo, useEffect } from 'react';
+import { useEffect } from 'react';
 import type { InterpreterFrom, StateFrom } from 'xstate';
 
 import type { CreateStoreAtomsReturn } from './atoms';
@@ -40,7 +40,7 @@ export class ReactFactory<T extends MachinesObj> {
   // ---------------------------------------------------------------------------
 
   private createUseSelector() {
-    const { serviceAtom } = this.atoms;
+    const { servicesAtom } = this.atoms;
     /**
      * A hook to be used as selector for a specific service.
      * @param key The key of the service to select from.
@@ -49,18 +49,19 @@ export class ReactFactory<T extends MachinesObj> {
      * @example
      * const count = useSelector('counter', (state) => state.context.count);
      */
+
     return function useSelector<K extends keyof T, R>(
       key: K,
       selector: (state: StateFrom<T[K]>) => R,
     ) {
-      const atom = useMemo(() => serviceAtom(key), [key]);
-      const service = useAtomValue(atom);
+      const services = useAtomValue(servicesAtom);
+      const service = services[key];
       return useSelectorRef(service, selector) as R;
     };
   }
 
   private createUseService() {
-    const { serviceAtom } = this.atoms;
+    const { servicesAtom } = this.atoms;
     /**
      * A hook to be used to get a specific service.
      * @param key The key of the service to get.
@@ -69,8 +70,8 @@ export class ReactFactory<T extends MachinesObj> {
      * const service = useService('counter');
      */
     return function useService<K extends keyof T>(key: K) {
-      const atom = useMemo(() => serviceAtom(key), [key]);
-      return useAtomValue(atom);
+      const services = useAtomValue(servicesAtom);
+      return services[key];
     };
   }
 
@@ -84,13 +85,15 @@ export class ReactFactory<T extends MachinesObj> {
      * const [state, send] = useState('counter');
      */
     return function useState<K extends keyof T>(key: K) {
-      const atom = useMemo(() => stateAtom(key), [key]);
-      return useAtom(atom) as [StateFrom<T[K]>, InterpreterFrom<T[K]>['send']];
+      return useAtom(stateAtom(key)) as [
+        StateFrom<T[K]>,
+        InterpreterFrom<T[K]>['send'],
+      ];
     };
   }
 
   private createUseUpdateMachineConfig() {
-    const { serviceAtom } = this.atoms;
+    const { servicesAtom, serviceAtom } = this.atoms;
     /**
      * A hook to be used to update a specific service config.
      * @param key The key of the service to update.
@@ -105,11 +108,14 @@ export class ReactFactory<T extends MachinesObj> {
       key: K,
       opts: Partial<AddMachineInput<T, K>['getOptions']> = {},
     ) {
-      const atom = useMemo(() => serviceAtom(key), [key]);
-      const [service, updateService] = useAtom(atom);
+      const updateService = useSetAtom(serviceAtom(key));
+      const services = useAtomValue(servicesAtom);
+      const service = services[key];
+
       useEffect(() => {
         updateService(opts);
       }, [opts, key]);
+
       return service as InterpreterFrom<T[K]>;
     };
   }

packages/react-xstore/src/atoms/stateAtom.ts

@@ -1,9 +1,9 @@
 import { atom } from 'jotai';
-import type { InterpreterFrom } from 'xstate';
+import { atomFamily } from 'jotai/utils';
+import type { InterpreterFrom, StateFrom } from 'xstate';
 
 import type { MachinesObj } from '../types';
 
-import type { MachinesAtom } from './machinesAtom';
 import type { ServiceAtom } from './serviceAtom';
 
 /**
@@ -14,23 +14,23 @@ import type { ServiceAtom } from './serviceAtom';
  * const [state, send] = useAtom(stateAtom('counter'));
  */
 export function createStateAtom<T extends MachinesObj>(
-  machinesAtom: MachinesAtom<T>,
   serviceAtom: ServiceAtom<T>,
 ) {
-  return <K extends keyof T>(key: keyof T) => {
-    type Service = InterpreterFrom<T[K]>;
+  return atomFamily((key: keyof T) => {
+    type Machine = T[keyof T];
+    type Service = InterpreterFrom<Machine>;
     type Event = Parameters<Service['send']>[0];
     return atom(
       (get) => {
-        const machineAtom = get(machinesAtom)[key];
-        return get(get(machineAtom).atoms.state);
+        const service = get(serviceAtom(key));
+        return service.getSnapshot() as StateFrom<Machine>;
       },
       (get, _set, ev: Event) => {
         const service = get(serviceAtom(key));
         service.send(ev);
       },
     );
-  };
+  });
 }
 export type StateAtom<T extends MachinesObj> = ReturnType<
   typeof createStateAtom<T>

packages/react-xstore/src/atoms/storeAtoms.ts

@@ -36,7 +36,7 @@ export function createStoreAtoms<T extends MachinesObj>(id: string) {
   const serviceAtom = createServiceAtom(machinesAtom);
   const servicesAtom = createServicesAtom(keysAtom, serviceAtom);
   const waitForAtom = createWaitForAtom(serviceAtom);
-  const stateAtom = createStateAtom(machinesAtom, serviceAtom);
+  const stateAtom = createStateAtom(serviceAtom);
   const onStateChangeAtom = createOnStateChangeAtom<T>();
   const onStoreStartAtom = createStoreStartAtom();
   return {