fix: Fixed redundant re-rendering issues

src/Experiment.spec.tsx

@@ -16,6 +16,7 @@
 /// <reference types="jest" />
 import * as React from 'react';
 import * as Enzyme from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import Adapter from 'enzyme-adapter-react-16';
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -30,8 +31,10 @@ describe('<OptimizelyExperiment>', () => {
   const variationKey = 'variationResult';
   let resolver: any;
   let optimizelyMock: ReactSDKClient;
+  let isReady: boolean;
 
   beforeEach(() => {
+    isReady = false;
     const onReadyPromise = new Promise((resolve, reject) => {
       resolver = {
         reject,
@@ -51,7 +54,9 @@ describe('<OptimizelyExperiment>', () => {
         id: 'testuser',
         attributes: {},
       },
-      isReady: jest.fn().mockReturnValue(false),
+      isReady: jest.fn().mockImplementation(() => isReady),
+      getIsReadyPromiseFulfilled: () => true,
+      getIsUsingSdkKey: () => true,
       onForcedVariationsUpdate: jest.fn().mockReturnValue(() => {}),
     } as unknown) as ReactSDKClient;
   });
@@ -282,8 +287,8 @@ describe('<OptimizelyExperiment>', () => {
 
       // Simulate client becoming ready
       resolver.resolve({ success: true });
-
-      await optimizelyMock.onReady();
+      isReady = true;
+      await act(async () => await optimizelyMock.onReady());
 
       component.update();
 
@@ -321,8 +326,8 @@ describe('<OptimizelyExperiment>', () => {
 
       // Simulate client becoming ready
       resolver.resolve({ success: true });
-
-      await optimizelyMock.onReady();
+      isReady = true;
+      await act(async () => await optimizelyMock.onReady());
 
       component.update();
 

src/Feature.spec.tsx

@@ -15,6 +15,7 @@
  */
 import * as React from 'react';
 import * as Enzyme from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import Adapter from 'enzyme-adapter-react-16';
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -27,11 +28,13 @@ describe('<OptimizelyFeature>', () => {
   let resolver: any;
   let optimizelyMock: ReactSDKClient;
   const isEnabledMock = true;
+  let isReady: boolean;
   const featureVariables = {
     foo: 'bar',
   };
 
   beforeEach(() => {
+    isReady = false;
     const onReadyPromise = new Promise((resolve, reject) => {
       resolver = {
         reject,
@@ -52,7 +55,9 @@ describe('<OptimizelyFeature>', () => {
         id: 'testuser',
         attributes: {},
       },
-      isReady: jest.fn().mockReturnValue(false),
+      isReady: jest.fn().mockImplementation(() => isReady),
+      getIsReadyPromiseFulfilled: () => true,
+      getIsUsingSdkKey: () => true,
     } as unknown) as ReactSDKClient;
   });
   it('throws an error when not rendered in the context of an OptimizelyProvider', () => {
@@ -209,7 +214,8 @@ describe('<OptimizelyFeature>', () => {
         // Simulate client becoming ready
         resolver.resolve({ success: true });
 
-        await optimizelyMock.onReady();
+        isReady = true;
+        await act(async () => await optimizelyMock.onReady());
 
         component.update();
 
@@ -226,7 +232,7 @@ describe('<OptimizelyFeature>', () => {
         }));
 
         const updateFn = (optimizelyMock.notificationCenter.addNotificationListener as jest.Mock).mock.calls[0][1];
-        updateFn();
+        act(updateFn);
 
         component.update();
 
@@ -253,7 +259,8 @@ describe('<OptimizelyFeature>', () => {
         // Simulate client becoming ready
         resolver.resolve({ success: true });
 
-        await optimizelyMock.onReady();
+        isReady = true;
+        await act(async () => await optimizelyMock.onReady());
 
         component.update();
 
@@ -269,7 +276,7 @@ describe('<OptimizelyFeature>', () => {
           foo: 'baz',
         }));
 
-        updateFn();
+        act(updateFn);
 
         component.update();
 

src/client.ts

@@ -46,6 +46,8 @@ export interface ReactSDKClient extends Omit<optimizely.Client, 'createUserConte
   setUser(userInfo: UserInfo): void;
   onUserUpdate(handler: OnUserUpdateHandler): DisposeFn;
   isReady(): boolean;
+  getIsReadyPromiseFulfilled(): boolean;
+  getIsUsingSdkKey(): boolean;
 
   activate(
     experimentKey: string,
@@ -165,27 +167,37 @@ class OptimizelyReactSDKClient implements ReactSDKClient {
     id: null,
     attributes: {},
   };
-  private userPromiseResovler: (user: UserInfo) => void;
+  private userPromiseResolver: (user: UserInfo) => void;
   private userPromise: Promise<OnReadyResult>;
   private isUserPromiseResolved = false;
   private onUserUpdateHandlers: OnUserUpdateHandler[] = [];
   private onForcedVariationsUpdateHandlers: OnForcedVariationsUpdateHandler[] = [];
 
+  // Is the javascript SDK instance ready.
+  private isClientReady: boolean = false;
+
+  // We need to add autoupdate listener to the hooks after the instance became fully ready to avoid redundant updates to hooks
+  private isReadyPromiseFulfilled: boolean = false;
+
+  // Its usually true from the beginning when user is provided as an object in the `OptimizelyProvider`
+  // This becomes more significant when a promise is provided instead.
+  private isUserReady: boolean = false;
+
+  private isUsingSdkKey: boolean = false;
+
   private readonly _client: optimizely.Client;
 
   // promise keeping track of async requests for initializing client instance
   private dataReadyPromise: Promise<OnReadyResult>;
 
-  private dataReadyPromiseFulfilled = false;
-
   /**
    * Creates an instance of OptimizelyReactSDKClient.
    * @param {optimizely.Config} [config={}]
    */
   constructor(config: optimizely.Config) {
     this.initialConfig = config;
 
-    this.userPromiseResovler = () => {};
+    this.userPromiseResolver = () => {};
 
     const configWithClientInfo = {
       ...config,
@@ -194,19 +206,39 @@ class OptimizelyReactSDKClient implements ReactSDKClient {
     };
     this._client = optimizely.createInstance(configWithClientInfo);
 
+    this.isClientReady = !!configWithClientInfo.datafile;
+    this.isUsingSdkKey = !!configWithClientInfo.sdkKey;
+
     this.userPromise = new Promise(resolve => {
-      this.userPromiseResovler = resolve;
-    }).then(() => ({ success: true }));
+      this.userPromiseResolver = resolve;
+    }).then(() => {
+      this.isUserReady = true;
+      return { success: true }
+    });
+
+    this._client.onReady().then(() => {
+      this.isClientReady = true;
+    });
 
     this.dataReadyPromise = Promise.all([this.userPromise, this._client.onReady()]).then(() => {
-      this.dataReadyPromiseFulfilled = true;
+
+      // Client and user can become ready synchronously and/or asynchronously. This flag specifically indicates that they became ready asynchronously.
+      this.isReadyPromiseFulfilled = true;
       return {
         success: true,
         reason: 'datafile and user resolved',
       };
     });
   }
 
+  getIsReadyPromiseFulfilled(): boolean { 
+    return this.isReadyPromiseFulfilled;
+  }
+
+  getIsUsingSdkKey(): boolean {
+    return this.isUsingSdkKey;
+  }
+
   onReady(config: { timeout?: number } = {}): Promise<OnReadyResult> {
     let timeoutId: number | undefined;
     let timeout: number = DEFAULT_ON_READY_TIMEOUT;
@@ -235,12 +267,13 @@ class OptimizelyReactSDKClient implements ReactSDKClient {
     // TODO add check for valid user
     if (userInfo.id) {
       this.user.id = userInfo.id;
+      this.isUserReady = true;
     }
     if (userInfo.attributes) {
       this.user.attributes = userInfo.attributes;
     }
     if (!this.isUserPromiseResolved) {
-      this.userPromiseResovler(this.user);
+      this.userPromiseResolver(this.user);
       this.isUserPromiseResolved = true;
     }
     this.onUserUpdateHandlers.forEach(handler => handler(this.user));
@@ -275,7 +308,8 @@ class OptimizelyReactSDKClient implements ReactSDKClient {
   }
 
   isReady(): boolean {
-    return this.dataReadyPromiseFulfilled;
+    // React SDK Instance only becomes ready when both JS SDK client and the user info is ready.
+    return this.isUserReady && this.isClientReady;
   }
 
   /**

src/hooks.spec.tsx

@@ -118,6 +118,8 @@ describe('hooks', () => {
         attributes: {},
       },
       isReady: () => readySuccess,
+      getIsReadyPromiseFulfilled: () => true,
+      getIsUsingSdkKey: () => true,
       onForcedVariationsUpdate: jest.fn().mockImplementation(handler => {
         forcedVariationUpdateCallbacks.push(handler);
         return () => {};

src/hooks.ts

@@ -210,18 +210,24 @@ export const useExperiment: UseExperiment = (experimentKey, options = {}, overri
 
   const finalReadyTimeout = options.timeout !== undefined ? options.timeout : timeout;
   useEffect(() => {
-    if (!isClientReady) {
+    // Subscribe to initialzation promise only
+    // 1. When client is using Sdk Key, which means the initialization will be asynchronous
+    //    and we need to wait for the promise and update decision.
+    // 2. When client is using datafile only but client is not ready yet which means user
+    //    was provided as a promise and we need to subscribe and wait for user to become available.
+    if (optimizely.getIsUsingSdkKey() || !isClientReady) {
       subscribeToInitialization(optimizely, finalReadyTimeout, initState => {
         setState({
           ...getCurrentDecision(),
           ...initState,
         });
       });
     }
-  }, [isClientReady, finalReadyTimeout, getCurrentDecision, optimizely]);
+  }, []);
 
   useEffect(() => {
-    if (options.autoUpdate) {
+    // Subscribe to update after first datafile is fetched and readyPromise is resolved to avoid redundant rendering.
+    if (optimizely.getIsReadyPromiseFulfilled() && options.autoUpdate) {
       return setupAutoUpdateListeners(optimizely, HookType.EXPERIMENT, experimentKey, hooksLogger, () => {
         setState(prevState => ({
           ...prevState,
@@ -230,7 +236,7 @@ export const useExperiment: UseExperiment = (experimentKey, options = {}, overri
       });
     }
     return (): void => {};
-  }, [isClientReady, options.autoUpdate, optimizely, experimentKey, getCurrentDecision]);
+  }, [optimizely.getIsReadyPromiseFulfilled(), options.autoUpdate, optimizely, experimentKey, getCurrentDecision]);
 
   useEffect(
     () =>
@@ -297,18 +303,24 @@ export const useFeature: UseFeature = (featureKey, options = {}, overrides = {})
 
   const finalReadyTimeout = options.timeout !== undefined ? options.timeout : timeout;
   useEffect(() => {
-    if (!isClientReady) {
+    // Subscribe to initialzation promise only
+    // 1. When client is using Sdk Key, which means the initialization will be asynchronous
+    //    and we need to wait for the promise and update decision.
+    // 2. When client is using datafile only but client is not ready yet which means user
+    //    was provided as a promise and we need to subscribe and wait for user to become available.
+    if (optimizely.getIsUsingSdkKey() || !isClientReady) {
       subscribeToInitialization(optimizely, finalReadyTimeout, initState => {
         setState({
           ...getCurrentDecision(),
           ...initState,
         });
       });
     }
-  }, [isClientReady, finalReadyTimeout, getCurrentDecision, optimizely]);
+  }, []);
 
   useEffect(() => {
-    if (options.autoUpdate) {
+    // Subscribe to update after first datafile is fetched and readyPromise is resolved to avoid redundant rendering.
+    if (optimizely.getIsReadyPromiseFulfilled() && options.autoUpdate) {
       return setupAutoUpdateListeners(optimizely, HookType.FEATURE, featureKey, hooksLogger, () => {
         setState(prevState => ({
           ...prevState,
@@ -317,7 +329,7 @@ export const useFeature: UseFeature = (featureKey, options = {}, overrides = {})
       });
     }
     return (): void => {};
-  }, [isClientReady, options.autoUpdate, optimizely, featureKey, getCurrentDecision]);
+  }, [optimizely.getIsReadyPromiseFulfilled(), options.autoUpdate, optimizely, featureKey, getCurrentDecision]);
 
   return [state.isEnabled, state.variables, state.clientReady, state.didTimeout];
 };
@@ -373,18 +385,24 @@ export const useDecision: UseDecision = (flagKey, options = {}, overrides = {})
 
   const finalReadyTimeout = options.timeout !== undefined ? options.timeout : timeout;
   useEffect(() => {
-    if (!isClientReady) {
+    // Subscribe to initialzation promise only
+    // 1. When client is using Sdk Key, which means the initialization will be asynchronous
+    //    and we need to wait for the promise and update decision.
+    // 2. When client is using datafile only but client is not ready yet which means user 
+    //    was provided as a promise and we need to subscribe and wait for user to become available.
+    if (optimizely.getIsUsingSdkKey() || !isClientReady) {
       subscribeToInitialization(optimizely, finalReadyTimeout, initState => {
         setState({
           ...getCurrentDecision(),
           ...initState,
         });
       });
     }
-  }, [isClientReady, finalReadyTimeout, getCurrentDecision, optimizely]);
+  }, []);
 
   useEffect(() => {
-    if (options.autoUpdate) {
+    // Subscribe to update after first datafile is fetched and readyPromise is resolved to avoid redundant rendering.
+    if (optimizely.getIsReadyPromiseFulfilled() && options.autoUpdate) {
       return setupAutoUpdateListeners(optimizely, HookType.FEATURE, flagKey, hooksLogger, () => {
         setState(prevState => ({
           ...prevState,
@@ -393,7 +411,7 @@ export const useDecision: UseDecision = (flagKey, options = {}, overrides = {})
       });
     }
     return (): void => {};
-  }, [isClientReady, options.autoUpdate, optimizely, flagKey, getCurrentDecision]);
+  }, [optimizely.getIsReadyPromiseFulfilled(), options.autoUpdate, optimizely, flagKey, getCurrentDecision]);
 
   return [state.decision, state.clientReady, state.didTimeout];
 };