[FSSDK-12295] useOptimizelyUserContext impl.

Author: junaed-optimizely

package-lock.json

@@ -60,6 +60,7 @@
     "@types/jest": "^30.0.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
+    "@types/use-sync-external-store": "^1.5.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitest/coverage-v8": "^4.0.18",

package.json

@@ -15,15 +15,14 @@
  */
 
 import { vi, describe, it, expect, beforeEach } from 'vitest';
-import React, { act, useRef } from 'react';
-import { render, screen } from '@testing-library/react';
+import React, { useRef } from 'react';
+import { render, screen, act } from '@testing-library/react';
 import { renderHook } from '@testing-library/react';
-import type { OptimizelyUserContext } from '@optimizely/optimizely-sdk';
-
 import { OptimizelyContext } from '../provider/OptimizelyProvider';
 import { ProviderStateStore } from '../provider/ProviderStateStore';
-import type { OptimizelyContextValue } from '../provider/types';
 import { useOptimizelyUserContext } from './useOptimizelyUserContext';
+import type { OptimizelyUserContext } from '@optimizely/optimizely-sdk';
+import type { OptimizelyContextValue } from '../provider/types';
 
 function useRenderCount() {
   const renderCount = useRef(0);
@@ -97,7 +96,7 @@ describe('useOptimizelyUserContext', () => {
     expect(result.current).toBe(mockUserContext);
   });
 
-  it('should update when user context changes', () => {
+  it('should update when user context changes', async () => {
     const wrapper = createWrapper(store);
     const { result } = renderHook(() => useOptimizelyUserContext(), { wrapper });
 
@@ -194,16 +193,4 @@ describe('useOptimizelyUserContext', () => {
     expect(capturedRenderCount).toBe(initialRenderCount);
     expect(screen.getByTestId('user-id').textContent).toBe('test-user');
   });
-
-  it('should return wrapped user context with forced decision methods', () => {
-    const mockUserContext = createMockUserContext();
-    store.setUserContext(mockUserContext);
-
-    const wrapper = createWrapper(store);
-    const { result } = renderHook(() => useOptimizelyUserContext(), { wrapper });
-
-    // The returned context should be the same reference as what's in the store
-    // (already wrapped by ProviderStateStore.setUserContext)
-    expect(result.current).toBe(store.getState().userContext);
-  });
 });

src/hooks/useOptimizelyUserContext.spec.tsx

@@ -14,20 +14,22 @@
  * limitations under the License.
  */
 
-import { useContext, useState, useEffect, useRef } from 'react';
+import { useContext, useCallback } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import type { OptimizelyUserContext } from '@optimizely/optimizely-sdk';
 
 import { OptimizelyContext } from '../provider/index';
 
 /**
- * Returns the current OptimizelyUserContext from the ProviderStateStore.
+ * Returns the current {@link OptimizelyUserContext} for the nearest `<OptimizelyProvider>`.
  *
- * The returned context has wrapped forced decision methods — calling
- * `setForcedDecision()`, `removeForcedDecision()`, or `removeAllForcedDecisions()`
- * on it will automatically trigger React re-renders in hooks watching the affected flags.
+ * The user context gives access to the user's identity (user ID and attributes)
+ * and methods for working with forced decisions (`setForcedDecision`,
+ * `removeForcedDecision`, `removeAllForcedDecisions`).
  *
- * Returns `null` while the SDK is initializing or if the user context has not been created yet.
+ * Returns `null` while the SDK is initializing or if no user has been set yet.
  */
+
 export function useOptimizelyUserContext(): OptimizelyUserContext | null {
   const context = useContext(OptimizelyContext);
 
@@ -37,16 +39,9 @@ export function useOptimizelyUserContext(): OptimizelyUserContext | null {
 
   const { store } = context;
 
-  const [userContext, setUserContext] = useState<OptimizelyUserContext | null>(() => store.getState().userContext);
-
-  useEffect(() => {
-    setUserContext(store.getState().userContext);
-    const unsubscribe = store.subscribe((state) => {
-      setUserContext(state.userContext);
-    });
+  const subscribe = useCallback((onStoreChange: () => void) => store.subscribe(onStoreChange), [store]);
 
-    return unsubscribe;
-  }, [store]);
+  const getSnapshot = useCallback(() => store.getState().userContext, [store]);
 
-  return userContext;
+  return useSyncExternalStore(subscribe, getSnapshot);
 }