@dynamic-labs/react-hooks 2.1.0-alpha.2 → 2.1.0-alpha.3

package/index.js

@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback, useEffect, useMemo } from 'react';
+import { useRef, useState, useCallback, useMemo } from 'react';
 import { effect, stop } from '@vue/reactivity';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -1545,7 +1545,7 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-const isObject = value => typeof value === 'object' && value !== null && value !== undefined;
+const isObject = value => typeof value === 'object' && value !== null && value !== undefined && typeof value !== 'function' && typeof value !== 'symbol' && typeof value !== 'bigint' && !Array.isArray(value) && !(value instanceof Date);
 /**
  * Watches for changes in the source and calls the callback when the source changes
  * @param source - The source to watch for changes
@@ -1553,9 +1553,12 @@ const isObject = value => typeof value === 'object' && value !== null && value !
  * @returns The unsubscribe function
  */
 const watch = (source, callback) => {
+  let isWatching = false;
   const runner = effect(source, {
+    onTrack: () => isWatching = true,
     scheduler: callback
   });
+  if (!isWatching) return undefined;
   return () => {
     stop(runner);
   };
@@ -1574,20 +1577,19 @@ const useReactivityProxy = target => {
   const proxyObjectCacheRef = useRef(new Map());
   // Rerender count to force rerender when the target changes
   const [, setRerenderCount] = useState(0);
-  const rerender = useCallback(() => setRerenderCount(rerenderCount => rerenderCount + 1), [setRerenderCount]);
   const unsubscribeAll = useCallback(() => {
     unsubscribeFunctionsRef.current.forEach(unsubscribeFunction => unsubscribeFunction());
     unsubscribeFunctionsRef.current.clear();
   }, []);
+  const rerender = useCallback(() => {
+    unsubscribeAll();
+    setRerenderCount(rerenderCount => rerenderCount + 1);
+  }, [setRerenderCount, unsubscribeAll]);
   /**
    * On every render it cleans the previous subscriptions.
    * This is necessary because different renders can have different subscriptions.
    */
   unsubscribeAll();
-  /**
-   * Unsubscribe all subscriptions when the component is unmounted
-   */
-  useEffect(() => () => unsubscribeAll(), [unsubscribeAll]);
   const addSubscriptionProxy = (target, proxyCacheKey) => {
     // Check if object path is already cached
     if (proxyObjectCacheRef.current.has(proxyCacheKey)) {
@@ -1599,9 +1601,13 @@ const useReactivityProxy = target => {
         const value = Reflect.get(target, prop, receiver);
         // Subscribe to the accessed attribute
         const unsubscribeFunction = watch(() => Reflect.get(target, prop, receiver), rerender);
-        unsubscribeFunctionsRef.current.add(unsubscribeFunction);
+        if (unsubscribeFunction) {
+          unsubscribeFunctionsRef.current.add(unsubscribeFunction);
+        }
+        const isReactiveValue = Boolean(unsubscribeFunction);
         // If the value is an object, we need to create a proxy for it too
-        if (isObject(value)) {
+        // but not when the value is reactive, if it is reactive we wanna stop creating proxies
+        if (isObject(value) && !isReactiveValue) {
           const propCachePath = `${proxyCacheKey}.${String(prop)}`;
           return addSubscriptionProxy(value, propCachePath);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/react-hooks",
-  "version": "2.1.0-alpha.2",
+  "version": "2.1.0-alpha.3",
   "main": "./index.js",
   "module": "./index.js",
   "types": "./src/index.d.ts",