extra-react-store 0.2.7 → 0.2.8

package/lib/use-selector.js

@@ -1,8 +1,7 @@
-import { useRef } from 'react';
-import { useIIFE, useForceUpdate, useStrictContext } from 'extra-react-hooks';
+import { useCallback, useRef, useSyncExternalStore } from 'react';
+import { useIIFE, useStrictContext } from 'extra-react-hooks';
 import { isReferenceEqual } from 'extra-utils';
 export function useSelector(context, selector, isEqual = isReferenceEqual) {
-    const forceUpdate = useForceUpdate();
     const store = useStrictContext(context);
     const updateRequireRef = useRef(true);
     useIIFE(() => {
@@ -15,21 +14,21 @@ export function useSelector(context, selector, isEqual = isReferenceEqual) {
         valueRef.current = selector(store.getState());
         updateRequireRef.current = false;
     }
-    useIIFE(() => {
+    return useSyncExternalStore(useCallback((onStoreChange) => {
         return store.subscribe(state => {
             try {
                 const newValue = selector(state);
                 if (!isEqual(valueRef.current, newValue)) {
                     valueRef.current = newValue;
-                    forceUpdate();
+                    updateRequireRef.current = false;
+                    onStoreChange();
                 }
             }
             catch {
                 updateRequireRef.current = true;
-                forceUpdate();
+                onStoreChange();
             }
         });
-    }, [store, selector, isEqual, forceUpdate, valueRef, updateRequireRef]);
-    return valueRef.current;
+    }, [store, selector, isEqual, updateRequireRef, valueRef]), useCallback(() => valueRef.current, [valueRef]));
 }
 //# sourceMappingURL=use-selector.js.map

package/lib/use-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-selector.js","sourceRoot":"","sources":["../src/use-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE9C,MAAM,UAAU,WAAW,CACzB,OAA4B,EAC5B,QAAiC,EACjC,UAA2C,gBAAgB;IAE3D,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IACpC,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAEvC,MAAM,gBAAgB,GAAG,MAAM,CAAU,IAAI,CAAC,CAAA;IAC9C,OAAO,CAAC,GAAG,EAAE;QACX,OAAO,GAAG,EAAE;YACV,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAA;QACjC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,QAAQ,GAAG,MAAM,CAAQ,SAAS,CAAC,CAAA;IACzC,IAAI,gBAAgB,CAAC,OAAO,EAAE,CAAC;QAC7B,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QAC7C,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAA;IAClC,CAAC;IAED,OAAO,CAAC,GAAG,EAAE;QACX,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAC7B,IAAI,CAAC;gBACH,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;gBAEhC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;oBAC1C,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAA;oBAC3B,WAAW,EAAE,CAAA;gBACf,CAAC;YACH,CAAC;YAAC,MAAM,CAAC;gBACP,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAA;gBAC/B,WAAW,EAAE,CAAA;YACf,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAEvE,OAAO,QAAQ,CAAC,OAAQ,CAAA;AAC1B,CAAC"}
+{"version":3,"file":"use-selector.js","sourceRoot":"","sources":["../src/use-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE9C,MAAM,UAAU,WAAW,CACzB,OAA4B,EAC5B,QAAiC,EACjC,UAA2C,gBAAgB;IAE3D,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAEvC,MAAM,gBAAgB,GAAG,MAAM,CAAU,IAAI,CAAC,CAAA;IAC9C,OAAO,CAAC,GAAG,EAAE;QACX,OAAO,GAAG,EAAE;YACV,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAA;QACjC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,QAAQ,GAAG,MAAM,CAAQ,SAAS,CAAC,CAAA;IACzC,IAAI,gBAAgB,CAAC,OAAO,EAAE,CAAC;QAC7B,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QAC7C,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAA;IAClC,CAAC;IAED,OAAO,oBAAoB,CACzB,WAAW,CAAC,CAAC,aAAyB,EAAE,EAAE;QACxC,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAC7B,IAAI,CAAC;gBACH,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;gBAEhC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;oBAC1C,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAA;oBAC3B,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAA;oBAChC,aAAa,EAAE,CAAA;gBACjB,CAAC;YACH,CAAC;YAAC,MAAM,CAAC;gBACP,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAA;gBAC/B,aAAa,EAAE,CAAA;YACjB,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,CAAC,CAAC,EAC1D,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CACjD,CAAA;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extra-react-store",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "",
   "keywords": [],
   "files": [

package/src/use-selector.ts

@@ -1,5 +1,5 @@
-import { useRef } from 'react'
-import { useIIFE, useForceUpdate, useStrictContext } from 'extra-react-hooks'
+import { useCallback, useRef, useSyncExternalStore } from 'react'
+import { useIIFE, useStrictContext } from 'extra-react-hooks'
 import { StoreContext } from './types.js'
 import { isReferenceEqual } from 'extra-utils'
 
@@ -8,7 +8,6 @@ export function useSelector<State, Value>(
 , selector: (state: State) => Value
 , isEqual: (a: Value, b: Value) => boolean = isReferenceEqual
 ): Value {
-  const forceUpdate = useForceUpdate()
   const store = useStrictContext(context)
 
   const updateRequireRef = useRef<boolean>(true)
@@ -24,21 +23,23 @@ export function useSelector<State, Value>(
     updateRequireRef.current = false
   }
 
-  useIIFE(() => {
-    return store.subscribe(state => {
-      try {
-        const newValue = selector(state)
+  return useSyncExternalStore(
+    useCallback((onStoreChange: () => void) => {
+      return store.subscribe(state => {
+        try {
+          const newValue = selector(state)
 
-        if (!isEqual(valueRef.current!, newValue)) {
-          valueRef.current = newValue
-          forceUpdate()
+          if (!isEqual(valueRef.current!, newValue)) {
+            valueRef.current = newValue
+            updateRequireRef.current = false
+            onStoreChange()
+          }
+        } catch {
+          updateRequireRef.current = true
+          onStoreChange()
         }
-      } catch {
-        updateRequireRef.current = true
-        forceUpdate()
-      }
-    })
-  }, [store, selector, isEqual, forceUpdate, valueRef, updateRequireRef])
-
-  return valueRef.current!
+      })
+    }, [store, selector, isEqual, updateRequireRef, valueRef])
+  , useCallback(() => valueRef.current!, [valueRef])
+  )
 }