[FSSDK-12274] provider user context manager integration

Author: junaed-optimizely

src/provider/OptimizelyProvider.spec.tsx

@@ -17,7 +17,9 @@
 import React, { createContext, useRef, useMemo, useEffect } from 'react';
 
 import { ProviderStateStore } from './ProviderStateStore';
-import type { OptimizelyProviderProps, OptimizelyContextValue } from './types';
+import { UserContextManager } from '../utils/UserContextManager';
+import { areUsersEqual, areSegmentsEqual } from '../utils/helpers';
+import type { OptimizelyProviderProps, OptimizelyContextValue, UserInfo } from './types';
 
 // TODO: Replace with proper logger when implemented
 const logger = {
@@ -36,10 +38,13 @@ export function OptimizelyProvider({
   user,
   timeout,
   skipSegments = false,
+  qualifiedSegments,
   children,
 }: OptimizelyProviderProps): React.ReactElement {
   const storeRef = useRef<ProviderStateStore | null>(null);
-  // Todo: const prevUserRef = useRef<UserInfo | undefined>(undefined);
+  const managerRef = useRef<UserContextManager | null>(null);
+  const prevUserRef = useRef<UserInfo | undefined>(undefined);
+  const prevSegmentsRef = useRef<string[] | undefined>(undefined);
 
   if (storeRef.current === null) {
     storeRef.current = new ProviderStateStore();
@@ -52,7 +57,7 @@ export function OptimizelyProvider({
       store,
       client,
     }),
-    [store, client]
+    [client, store]
   );
 
   useEffect(() => {
@@ -88,10 +93,48 @@ export function OptimizelyProvider({
     };
   }, [client, timeout, store]);
 
-  // Handle user changes
+  // Effect 2: Manager lifecycle (create/dispose when client/skipSegments changes)
+  // Does NOT trigger createUserContext — only manages the manager instance
   useEffect(() => {
-    // TODO: UserContextManager implementation
-  }, []);
+    if (!client) return;
+
+    managerRef.current?.dispose();
+    managerRef.current = new UserContextManager({
+      client,
+      skipSegments,
+      onUserContextReady: (ctx) => store.setUserContext(ctx),
+      onError: (error) => store.setError(error),
+    });
+
+    // Reset prevUser/segments so Effect 3 treats current user as new
+    prevUserRef.current = undefined;
+    prevSegmentsRef.current = undefined;
+
+    return () => {
+      managerRef.current?.dispose();
+      managerRef.current = null;
+    };
+  }, [client, skipSegments, store]);
+
+  // Effect 3: User/segments prop changes — sole trigger for createUserContext
+  // Runs on mount (prevUser is undefined) and on user/qualifiedSegments prop changes.
+  // Also re-runs when client/skipSegments change (because Effect 2 resets
+  // prevUserRef/prevSegmentsRef to undefined, and these deps are shared).
+  useEffect(() => {
+    if (!managerRef.current) return;
+
+    const prevUser = prevUserRef.current;
+    const prevSegments = prevSegmentsRef.current;
+    const userChanged = prevUser === undefined || !areUsersEqual(prevUser, user);
+    const segmentsChanged = !areSegmentsEqual(prevSegments, qualifiedSegments);
+
+    if (!userChanged && !segmentsChanged) return;
+
+    prevUserRef.current = user;
+    prevSegmentsRef.current = qualifiedSegments;
+    managerRef.current.createUserContext(user, qualifiedSegments);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user?.id, user?.attributes, qualifiedSegments, client, skipSegments]);
 
   // Cleanup on unmount
   useEffect(() => {

src/provider/OptimizelyProvider.tsx

@@ -52,6 +52,14 @@ export interface OptimizelyProviderProps {
    */
   skipSegments?: boolean;
 
+  /**
+   * Pre-fetched qualified segments for the user.
+   * When provided, the user context is created immediately with these segments,
+   * and a background fetch verifies them (unless skipSegments is true).
+   * `undefined` = normal flow, `[]` = explicit "zero segments".
+   */
+  qualifiedSegments?: string[];
+
   /**
    * React children to render.
    */

src/provider/types.ts

@@ -18,6 +18,7 @@ import type { Client, OptimizelyUserContext } from '@optimizely/optimizely-sdk';
 import { REACT_CLIENT_META } from '../client/index';
 import type { ReactClientMeta } from '../client/index';
 import type { UserInfo } from '../provider/index';
+import { areSegmentsEqual } from './helpers';
 
 export interface UserContextManagerConfig {
   client: Client;
@@ -104,7 +105,7 @@ export class UserContextManager {
           if (this.isStale(requestId)) return;
 
           // update only if different
-          if (!this.segmentsEqual(snapshot, ctx.qualifiedSegments)) {
+          if (!areSegmentsEqual(snapshot, ctx.qualifiedSegments)) {
             this.onUserContextReady(ctx);
           }
         }
@@ -126,15 +127,6 @@ export class UserContextManager {
     this.onUserContextReady(ctx);
   }
 
-  private segmentsEqual(a: string[] | null, b: string[] | null): boolean {
-    if (a === b) return true;
-    if (!a || !b) return false;
-    if (a.length !== b.length) return false;
-    const sortedA = [...a].sort();
-    const sortedB = [...b].sort();
-    return sortedA.every((val, i) => val === sortedB[i]);
-  }
-
   private isStale(requestId: number): boolean {
     return this.disposed || requestId !== this.requestId;
   }

src/utils/UserContextManager.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright 2026, Optimizely
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { UserInfo } from '../provider/types';
+
+/**
+ * Compares two string arrays for value equality (order-insensitive).
+ * Used to prevent redundant user context creation when the segments prop
+ * is referentially different but value-equal.
+ */
+export function areSegmentsEqual(a?: string[] | null, b?: string[] | null): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  if (a.length !== b.length) return false;
+  const sortedA = [...a].sort();
+  const sortedB = [...b].sort();
+  return sortedA.every((val, i) => val === sortedB[i]);
+}
+
+/**
+ * Compares two UserInfo objects for value equality.
+ * Used to prevent redundant user context creation when the user prop
+ * is referentially different but value-equal.
+ */
+export function areUsersEqual(user1?: UserInfo, user2?: UserInfo): boolean {
+  if (user1 === user2) return true;
+  if (!user1 || !user2) return false;
+  if (user1.id !== user2.id) return false;
+
+  const attrs1 = user1.attributes || {};
+  const attrs2 = user2.attributes || {};
+
+  const keys1 = Object.keys(attrs1);
+  const keys2 = Object.keys(attrs2);
+
+  if (keys1.length !== keys2.length) return false;
+
+  for (const key of keys1) {
+    if (attrs1[key] !== attrs2[key]) return false;
+  }
+
+  return true;
+}

src/utils/helpers.ts

@@ -16,3 +16,5 @@
 
 export { UserContextManager } from './UserContextManager';
 export type { UserContextManagerConfig } from './UserContextManager';
+
+export { areUsersEqual } from './helpers';

src/utils/index.ts

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["./src/**/*.ts", "./src/**/*.tsx", "**/*.spec.ts", "vitest.setup.ts"],
+  "exclude": ["./dist", "./.build", "./node_modules"],
+  "compilerOptions": {
+    "types": ["vitest/globals", "vitest/jsdom"]
+  }
+}

tsconfig.spec.json

@@ -4,6 +4,9 @@ export default defineConfig({
   test: {
     environment: 'happy-dom',
     setupFiles: ['./vitest.setup.ts'],
+    typecheck: {
+      tsconfig: './tsconfig.spec.json',
+    },
     include: [
       'src/client/**/*.spec.{ts,tsx}',
       'src/provider/**/*.spec.{ts,tsx}',