fix: Fixed redundant re-rendering issues (#125)

## Summary
Made the following re-rendering fixes.
1. When SDK is initialized using a datafile, hooks were doing an empty first render and the real decision was returned on the second render. Fixed the SDK to render the correct decision on first render when initialized synchronously.
2. When SDK is initialized with datafile and SDK key both, The hook was being evaluated three times instead of two. Fixed the redundant re-rendering in this case.

Also checked the SDK thoroughly in many combination of sync/async intialization parameters and made fixes where needed.

## Test Plan
1. All unit tests pass.
2. Tested all the hooks and components thoroughly with hard coded data file, SDK key and both along with async/sync user initialzation and autoUpdate true/false.

Author: zashraf1985

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];
 };