pocket-state 0.1.21 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pocket-state",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "tiny global store",
   "main": "src/index",
   "codegenConfig": {

package/src/globalState/hooks.ts

@@ -1,34 +1,43 @@
 import {useCallback, useRef, useSyncExternalStore} from 'react';
 import type {Store} from './type';
+import {shallow} from '../utils/shallowEqual';
+
+type EqualityFn<S> = (a: any, b: any) => boolean;
+
+// Overloads
+export function useStore<T>(store: Store<T>): T;
+export function useStore<T, S>(
+  store: Store<T>,
+  selector: (state: T) => S,
+  equalityFn?: EqualityFn<S>,
+): S;
 
 export function useStore<T, S = T>(
   store: Store<T>,
   selector?: (state: T) => S,
+  equalityFn: EqualityFn<S> = shallow,
 ): S {
   const sel = selector ?? ((s: T) => s as unknown as S);
 
-  const lastStateRef = useRef<T>(store.getValue());
-  const lastSliceRef = useRef<S>(sel(lastStateRef.current));
+  const sliceRef = useRef<S>(sel(store.getValue()));
+  const eqFn = selector ? equalityFn : Object.is;
 
-  const subscribe = useCallback(
-    (onChange: () => void) => {
-      return store.subscribe(sel, (prevSlice: S, nextSlice: S) => {
-        lastStateRef.current = store.getValue();
-        lastSliceRef.current = nextSlice;
+  const subscribe = useCallback((onChange: () => void) => {
+    return store.subscribe(sel, (_prev: S, next: S) => {
+      if (!eqFn(sliceRef.current, next)) {
+        sliceRef.current = next;
         onChange();
-      });
-    },
-    [store, sel],
-  );
+      }
+    });
+  }, []);
 
   const getSnapshot = useCallback(() => {
-    const s = store.getValue();
-    if (s !== lastStateRef.current) {
-      lastStateRef.current = s;
-      lastSliceRef.current = sel(s);
+    const next = sel(store.getValue());
+    if (!eqFn(sliceRef.current, next)) {
+      sliceRef.current = next;
     }
-    return lastSliceRef.current;
-  }, [store, sel]);
+    return sliceRef.current;
+  }, []);
 
   return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }

package/src/globalState/store.ts

@@ -48,27 +48,25 @@ export function createStore<T>(
   }) as UseStoreGet<T>;
 
   function subscribe(selectorOrListener: any, maybeListener?: any) {
-    let wrapped: (nextState: T) => void;
+    let wrapped: Listener<any>;
 
     if (typeof maybeListener === 'function') {
       const selector: (s: T) => any = selectorOrListener;
-      const listener: Listener<any> = maybeListener;
-
       let prevSlice = selector(state);
-      wrapped = (nextState: T) => {
-        const nextSlice = selector(nextState);
-        if (!areEqual(nextSlice, prevSlice)) {
-          listener(prevSlice, nextSlice);
-          prevSlice = nextSlice;
+      wrapped = (next: T) => {
+        const slice = selector(next);
+        if (!areEqual(slice, prevSlice)) {
+          maybeListener(prevSlice, slice);
+          prevSlice = slice;
         }
       };
     } else {
       const listener: Listener<T> = selectorOrListener;
-      let prevState = state;
-      wrapped = (nextState: T) => {
-        if (!areEqual(nextState, prevState)) {
-          listener(prevState, nextState);
-          prevState = nextState;
+      let prev = state;
+      wrapped = (next: T) => {
+        if (!areEqual(next, prev)) {
+          listener(prev, next);
+          prev = next;
         }
       };
     }