pocket-state 0.0.2 → 0.0.3

package/package.json

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

package/src/globalState/hooks.ts

@@ -1,7 +1,8 @@
 // useStore.ts
-import {useCallback} from 'react';
+import {useCallback, useRef} from 'react';
 import {useSyncExternalStore} from 'react';
 import type {Store} from './type';
+import {shallow} from './shallowEqual';
 
 export function useStore<T>(store: Store<T>): T;
 export function useStore<T, S>(store: Store<T>, selector: (state: T) => S): S;
@@ -24,3 +25,34 @@ export function useStore<T, S = T>(
 
   return useSyncExternalStore(subscribe, getSnapshot, getSnapshot) as T | S;
 }
+
+//shallow
+export function useShallowStore<T, S>(
+  store: Store<T>,
+  selector: (state: T) => S,
+): S {
+  const selectorRef = useRef(selector);
+  selectorRef.current = selector;
+
+  const lastSliceRef = useRef<S>(selector(store.getValue()));
+
+  const subscribe = (onChange: () => void) => {
+    return store.subscribe((nextState: T) => {
+      const nextSlice = selectorRef.current(nextState);
+      if (!shallow(lastSliceRef.current as any, nextSlice as any)) {
+        lastSliceRef.current = nextSlice;
+        onChange();
+      }
+    });
+  };
+
+  const getSnapshot = () => {
+    const current = selectorRef.current(store.getValue());
+    if (!shallow(lastSliceRef.current as any, current as any)) {
+      lastSliceRef.current = current;
+    }
+    return lastSliceRef.current;
+  };
+
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}