pocket-state 0.1.20 → 0.1.22

package/package.json

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

package/src/globalState/hooks.ts

@@ -1,31 +1,42 @@
 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, (nextSlice: S) => {
-      lastStateRef.current = store.getValue();
-      lastSliceRef.current = nextSlice;
-      onChange();
+    return store.subscribe(sel, (_prev: S, next: S) => {
+      if (!eqFn(sliceRef.current, next)) {
+        sliceRef.current = next;
+        onChange();
+      }
     });
   }, []);
 
   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;
+    return sliceRef.current;
   }, []);
 
   return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);

package/src/globalState/store.ts

@@ -56,8 +56,8 @@ export function createStore<T>(
       wrapped = (next: T) => {
         const slice = selector(next);
         if (!areEqual(slice, prevSlice)) {
-          prevSlice = slice;
           maybeListener(prevSlice, slice);
+          prevSlice = slice;
         }
       };
     } else {
@@ -65,8 +65,8 @@ export function createStore<T>(
       let prev = state;
       wrapped = (next: T) => {
         if (!areEqual(next, prev)) {
-          prev = next;
           listener(prev, next);
+          prev = next;
         }
       };
     }