Merge branch 'main' into feat-migrate-multi-provider

Author: jonathannorris

.release-please-manifest.json

@@ -1,6 +1,6 @@
 {
   "packages/nest": "0.2.5",
-  "packages/react": "1.0.0",
+  "packages/react": "1.0.1",
   "packages/web": "1.6.1",
   "packages/server": "1.19.0",
   "packages/shared": "1.9.0",

packages/react/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.0.1](https://github.com/open-feature/js-sdk/compare/react-sdk-v1.0.0...react-sdk-v1.0.1) (2025-08-18)
+
+
+### 🐛 Bug Fixes
+
+* **react:** re-evaluate flags on re-render to detect silent provider … ([#1226](https://github.com/open-feature/js-sdk/issues/1226)) ([3105595](https://github.com/open-feature/js-sdk/commit/31055959265a53f52102590f54fa3168811ec678))
+
 ## [1.0.0](https://github.com/open-feature/js-sdk/compare/react-sdk-v0.4.11...react-sdk-v1.0.0) (2025-04-14)
 
 

packages/react/README.md

@@ -16,8 +16,8 @@
     <img alt="Specification" src="https://img.shields.io/static/v1?label=specification&message=v0.8.0&color=yellow&style=for-the-badge" />
   </a>
   <!-- x-release-please-start-version -->
-  <a href="https://github.com/open-feature/js-sdk/releases/tag/react-sdk-v1.0.0">
-    <img alt="Release" src="https://img.shields.io/static/v1?label=release&message=v1.0.0&color=blue&style=for-the-badge" />
+  <a href="https://github.com/open-feature/js-sdk/releases/tag/react-sdk-v1.0.1">
+    <img alt="Release" src="https://img.shields.io/static/v1?label=release&message=v1.0.1&color=blue&style=for-the-badge" />
   </a>
   <!-- x-release-please-end -->
   <br/>

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openfeature/react-sdk",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "OpenFeature React SDK",
   "main": "./dist/cjs/index.js",
   "files": [

packages/react/src/evaluation/use-feature-flag.ts

@@ -8,7 +8,7 @@ import type {
   JsonValue,
 } from '@openfeature/web-sdk';
 import { ProviderEvents, ProviderStatus } from '@openfeature/web-sdk';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
   DEFAULT_OPTIONS,
   isEqual,
@@ -287,8 +287,7 @@ function attachHandlersAndResolve<T extends FlagValue>(
   const client = useOpenFeatureClient();
   const status = useOpenFeatureClientStatus();
   const provider = useOpenFeatureProvider();
-
-  const controller = new AbortController();
+  const isFirstRender = useRef(true);
 
   if (defaultedOptions.suspendUntilReady && status === ProviderStatus.NOT_READY) {
     suspendUntilInitialized(provider, client);
@@ -298,17 +297,30 @@ function attachHandlersAndResolve<T extends FlagValue>(
     suspendUntilReconciled(client);
   }
 
-  const [evaluationDetails, setEvaluationDetails] = useState<EvaluationDetails<T>>(
+  const [evaluationDetails, setEvaluationDetails] = useState<EvaluationDetails<T>>(() =>
     resolver(client).call(client, flagKey, defaultValue, options),
   );
+  
+  // Re-evaluate when dependencies change (handles prop changes like flagKey), or if during a re-render, we have detected a change in the evaluated value
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    
+    const newDetails = resolver(client).call(client, flagKey, defaultValue, options);
+    if (!isEqual(newDetails.value, evaluationDetails.value)) {
+      setEvaluationDetails(newDetails);
+    }
+  }, [client, flagKey, defaultValue, options, resolver, evaluationDetails]);
 
   // Maintain a mutable reference to the evaluation details to have a up-to-date reference in the handlers.
   const evaluationDetailsRef = useRef<EvaluationDetails<T>>(evaluationDetails);
   useEffect(() => {
     evaluationDetailsRef.current = evaluationDetails;
   }, [evaluationDetails]);
 
-  const updateEvaluationDetailsCallback = () => {
+  const updateEvaluationDetailsCallback = useCallback(() => {
     const updatedEvaluationDetails = resolver(client).call(client, flagKey, defaultValue, options);
 
     /**
@@ -319,15 +331,19 @@ function attachHandlersAndResolve<T extends FlagValue>(
     if (!isEqual(updatedEvaluationDetails.value, evaluationDetailsRef.current.value)) {
       setEvaluationDetails(updatedEvaluationDetails);
     }
-  };
+  }, [client, flagKey, defaultValue, options, resolver]);
 
-  const configurationChangeCallback: EventHandler<ClientProviderEvents.ConfigurationChanged> = (eventDetails) => {
-    if (shouldEvaluateFlag(flagKey, eventDetails?.flagsChanged)) {
-      updateEvaluationDetailsCallback();
-    }
-  };
+  const configurationChangeCallback = useCallback<EventHandler<ClientProviderEvents.ConfigurationChanged>>(
+    (eventDetails) => {
+      if (shouldEvaluateFlag(flagKey, eventDetails?.flagsChanged)) {
+        updateEvaluationDetailsCallback();
+      }
+    },
+    [flagKey, updateEvaluationDetailsCallback],
+  );
 
   useEffect(() => {
+    const controller = new AbortController();
     if (status === ProviderStatus.NOT_READY) {
       // update when the provider is ready
       client.addHandler(ProviderEvents.Ready, updateEvaluationDetailsCallback, { signal: controller.signal });
@@ -348,7 +364,14 @@ function attachHandlersAndResolve<T extends FlagValue>(
       // cleanup the handlers
       controller.abort();
     };
-  }, []);
+  }, [
+    client,
+    status,
+    defaultedOptions.updateOnContextChanged,
+    defaultedOptions.updateOnConfigurationChanged,
+    updateEvaluationDetailsCallback,
+    configurationChangeCallback,
+  ]);
 
   return evaluationDetails;
 }

packages/react/test/evaluation.spec.tsx

@@ -924,17 +924,124 @@ describe('evaluation', () => {
           OpenFeature.setContext(SUSPEND_OFF, { user: TARGETED_USER });
         });
 
-        // expect to see static value until we reconcile
-        await waitFor(() => expect(screen.queryByText(STATIC_FLAG_VALUE_A)).toBeInTheDocument(), {
-          timeout: DELAY / 2,
-        });
-
-        // make sure we updated after reconciling
+        // With the fix for useState initialization, the hook now immediately
+        // reflects provider state changes. This is intentional to handle cases
+        // where providers don't emit proper events.
+        // The value updates immediately to the targeted value.
         await waitFor(() => expect(screen.queryByText(TARGETED_FLAG_VALUE)).toBeInTheDocument(), {
           timeout: DELAY * 2,
         });
       });
     });
+
+    describe('re-render behavior when flag values change without provider events', ()=> {
+      it('should reflect provider state changes on re-render even without provider events', async () => {
+        let providerValue = 'initial-value';
+        
+        class SilentUpdateProvider extends InMemoryProvider {
+          resolveBooleanEvaluation() {
+            return {
+              value: true,
+              variant: 'on',
+              reason: StandardResolutionReasons.STATIC,
+            };
+          }
+          
+          resolveStringEvaluation() {
+            return {
+              value: providerValue,
+              variant: providerValue,
+              reason: StandardResolutionReasons.STATIC,
+            };
+          }
+        }
+        
+        const provider = new SilentUpdateProvider({});
+        await OpenFeature.setProviderAndWait('test', provider);
+        
+        // The triggerRender prop forces a re-render
+        const TestComponent = ({ triggerRender }: { triggerRender: number }) => {
+          const { value } = useFlag('test-flag', 'default');
+          return <div data-testid="flag-value" data-render-count={triggerRender}>{value}</div>;
+        };
+        
+        const WrapperComponent = () => {
+          const [renderCount, setRenderCount] = useState(0);
+          return (
+            <>
+              <button onClick={() => setRenderCount(c => c + 1)}>Force Re-render</button>
+              <TestComponent triggerRender={renderCount} />
+            </>
+          );
+        };
+        
+        const { getByText } = render(
+          <OpenFeatureProvider client={OpenFeature.getClient('test')}>
+            <WrapperComponent />
+          </OpenFeatureProvider>
+        );
+        
+        // Initial value should be rendered
+        await waitFor(() => {
+          expect(screen.getByTestId('flag-value')).toHaveTextContent('initial-value');
+        });
+        
+        // Change the provider's internal state (without emitting events)
+        providerValue = 'updated-value';
+        
+        // Force a re-render of the component
+        act(() => {
+          getByText('Force Re-render').click();
+        });
+        
+        await waitFor(() => {
+          expect(screen.getByTestId('flag-value')).toHaveTextContent('updated-value');
+        });
+      });
+
+      it('should update flag value when flag key prop changes without provider events', async () => {
+        const provider = new InMemoryProvider({
+          'flag-a': {
+            disabled: false,
+            variants: { on: 'value-a' },
+            defaultVariant: 'on',
+          },
+          'flag-b': {
+            disabled: false,
+            variants: { on: 'value-b' },
+            defaultVariant: 'on',
+          },
+        });
+        
+        await OpenFeature.setProviderAndWait(EVALUATION, provider);
+        
+        const TestComponent = ({ flagKey }: { flagKey: string }) => {
+          const { value } = useFlag(flagKey, 'default');
+          return <div data-testid="flag-value">{value}</div>;
+        };
+        
+        const { rerender } = render(
+          <OpenFeatureProvider client={OpenFeature.getClient(EVALUATION)}>
+            <TestComponent flagKey="flag-a" />
+          </OpenFeatureProvider>
+        );
+        
+        await waitFor(() => {
+          expect(screen.getByTestId('flag-value')).toHaveTextContent('value-a');
+        });
+        
+        // Change to flag-b (without any provider events)
+        rerender(
+          <OpenFeatureProvider client={OpenFeature.getClient(EVALUATION)}>
+            <TestComponent flagKey="flag-b" />
+          </OpenFeatureProvider>
+        );
+        
+        await waitFor(() => {
+          expect(screen.getByTestId('flag-value')).toHaveTextContent('value-b');
+        });
+      });
+    });
   });
 
   describe('context, hooks and options', () => {

packages/react/test/provider.spec.tsx

@@ -288,7 +288,7 @@ describe('OpenFeatureProvider', () => {
         { timeout: DELAY * 4 },
       );
 
-      expect(screen.getByText('Will says hi')).toBeInTheDocument();
+      expect(screen.getByText('Will says aloha')).toBeInTheDocument();
     });
   });
 });

release-please-config.json

@@ -20,7 +20,6 @@
       "versioning": "default"
     },
     "packages/react": {
-      "release-as": "1.0.0",
       "release-type": "node",
       "prerelease": false,
       "bump-minor-pre-major": true,