@ninetailed/experience.js-react 7.13.0-beta.0 → 7.13.0-beta.1

package/index.cjs.js

@@ -161,29 +161,36 @@ const usePersonalize = (baseline, variants, options = {
 function useFlag(flagKey, defaultValue) {
   const ninetailed = useNinetailed();
   const lastProcessedState = React.useRef(null);
+  const defaultValueRef = React.useRef(defaultValue);
+  const flagKeyRef = React.useRef(flagKey);
   const [result, setResult] = React.useState({
     value: defaultValue,
     status: 'loading',
     error: null
   });
+  // Effect 1: Track changes to `flagKey` or `defaultValue`
+  React.useEffect(() => {
+    if (!radash.isEqual(defaultValueRef.current, defaultValue) || flagKeyRef.current !== flagKey) {
+      defaultValueRef.current = defaultValue;
+      flagKeyRef.current = flagKey;
+      setResult({
+        value: defaultValue,
+        status: 'loading',
+        error: null
+      });
+      lastProcessedState.current = null;
+    }
+  }, [flagKey, defaultValue]);
+  // Effect 2: Handle Ninetailed changes
   React.useEffect(() => {
-    // Reset state when dependencies change
-    setResult({
-      value: defaultValue,
-      status: 'loading',
-      error: null
-    });
-    lastProcessedState.current = null;
     const unsubscribe = ninetailed.onChangesChange(changesState => {
       if (lastProcessedState.current && radash.isEqual(lastProcessedState.current, changesState)) {
-        experience_jsShared.logger.debug('Change State Did Not Change', changesState);
         return;
       }
       lastProcessedState.current = changesState;
       if (changesState.status === 'loading') {
-        // Don't use a function updater here to avoid type issues
         setResult({
-          value: defaultValue,
+          value: defaultValueRef.current,
           status: 'loading',
           error: null
         });
@@ -191,40 +198,37 @@ function useFlag(flagKey, defaultValue) {
       }
       if (changesState.status === 'error') {
         setResult({
-          value: defaultValue,
+          value: defaultValueRef.current,
           status: 'error',
           error: changesState.error
         });
         return;
       }
       try {
-        // Find the change with our flag key
-        const change = changesState.changes.find(change => change.key === flagKey);
+        const change = changesState.changes.find(change => change.key === flagKeyRef.current);
         if (change && change.type === experience_jsShared.ChangeTypes.Variable) {
-          const flagValue = change.value;
           setResult({
-            value: flagValue,
+            value: change.value,
             status: 'success',
             error: null
           });
         } else {
-          // Flag not found or wrong type, use default
           setResult({
-            value: defaultValue,
+            value: defaultValueRef.current,
             status: 'success',
             error: null
           });
         }
       } catch (error) {
         setResult({
-          value: defaultValue,
+          value: defaultValueRef.current,
           status: 'error',
           error: error instanceof Error ? error : new Error(String(error))
         });
       }
     });
     return unsubscribe;
-  }, [ninetailed, flagKey, defaultValue]);
+  }, [ninetailed]);
   return result;
 }
 

package/index.esm.js

@@ -142,29 +142,38 @@ const usePersonalize = (baseline, variants, options = {
 function useFlag(flagKey, defaultValue) {
   const ninetailed = useNinetailed();
   const lastProcessedState = useRef(null);
+  const defaultValueRef = useRef(defaultValue);
+  const flagKeyRef = useRef(flagKey);
   const [result, setResult] = useState({
     value: defaultValue,
     status: 'loading',
     error: null
   });
+
+  // Effect 1: Track changes to `flagKey` or `defaultValue`
+  useEffect(() => {
+    if (!isEqual(defaultValueRef.current, defaultValue) || flagKeyRef.current !== flagKey) {
+      defaultValueRef.current = defaultValue;
+      flagKeyRef.current = flagKey;
+      setResult({
+        value: defaultValue,
+        status: 'loading',
+        error: null
+      });
+      lastProcessedState.current = null;
+    }
+  }, [flagKey, defaultValue]);
+
+  // Effect 2: Handle Ninetailed changes
   useEffect(() => {
-    // Reset state when dependencies change
-    setResult({
-      value: defaultValue,
-      status: 'loading',
-      error: null
-    });
-    lastProcessedState.current = null;
     const unsubscribe = ninetailed.onChangesChange(changesState => {
       if (lastProcessedState.current && isEqual(lastProcessedState.current, changesState)) {
-        logger.debug('Change State Did Not Change', changesState);
         return;
       }
       lastProcessedState.current = changesState;
       if (changesState.status === 'loading') {
-        // Don't use a function updater here to avoid type issues
         setResult({
-          value: defaultValue,
+          value: defaultValueRef.current,
           status: 'loading',
           error: null
         });
@@ -172,40 +181,37 @@ function useFlag(flagKey, defaultValue) {
       }
       if (changesState.status === 'error') {
         setResult({
-          value: defaultValue,
+          value: defaultValueRef.current,
           status: 'error',
           error: changesState.error
         });
         return;
       }
       try {
-        // Find the change with our flag key
-        const change = changesState.changes.find(change => change.key === flagKey);
+        const change = changesState.changes.find(change => change.key === flagKeyRef.current);
         if (change && change.type === ChangeTypes.Variable) {
-          const flagValue = change.value;
           setResult({
-            value: flagValue,
+            value: change.value,
             status: 'success',
             error: null
           });
         } else {
-          // Flag not found or wrong type, use default
           setResult({
-            value: defaultValue,
+            value: defaultValueRef.current,
             status: 'success',
             error: null
           });
         }
       } catch (error) {
         setResult({
-          value: defaultValue,
+          value: defaultValueRef.current,
           status: 'error',
           error: error instanceof Error ? error : new Error(String(error))
         });
       }
     });
     return unsubscribe;
-  }, [ninetailed, flagKey, defaultValue]);
+  }, [ninetailed]);
   return result;
 }
 

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "7.13.0-beta.0",
+  "version": "7.13.0-beta.1",
   "description": "Ninetailed SDK for React",
   "dependencies": {
-    "@ninetailed/experience.js": "7.13.0-beta.0",
-    "@ninetailed/experience.js-shared": "7.13.0-beta.0",
-    "@ninetailed/experience.js-plugin-analytics": "7.13.0-beta.0",
+    "@ninetailed/experience.js": "7.13.0-beta.1",
+    "@ninetailed/experience.js-shared": "7.13.0-beta.1",
+    "@ninetailed/experience.js-plugin-analytics": "7.13.0-beta.1",
     "radash": "10.9.0",
     "react-is": "18.2.0"
   },