fixed useSplitClient to support changes on update options

Author: EmilianoSanchez

src/__tests__/useSplitClient.test.tsx

@@ -15,7 +15,7 @@ import { useSplitClient } from '../useSplitClient';
 import { SplitClient } from '../SplitClient';
 import { SplitContext } from '../SplitContext';
 
-test('useSplitClient', () => {
+test('useSplitClient must update on SDK events', () => {
   const outerFactory = SplitSdk(sdkBrowser);
   const mainClient = outerFactory.client() as any;
   const user2Client = outerFactory.client('user_2') as any;
@@ -128,3 +128,40 @@ test('useSplitClient', () => {
 
   expect(countNestedComponent).toEqual(4);
 });
+
+test('useSplitClient must support changes in update props', () => {
+  const outerFactory = SplitSdk(sdkBrowser);
+  const mainClient = outerFactory.client() as any;
+
+  let rendersCount = 0;
+
+  function InnerComponent(updateOptions) {
+    useSplitClient(undefined, undefined, undefined, updateOptions);
+    rendersCount++;
+    return null;
+  }
+
+  function Component(updateOptions) {
+    return (
+      <SplitFactory factory={outerFactory} >
+        <InnerComponent {...updateOptions} />
+      </SplitFactory>
+    )
+  }
+
+  const wrapper = render(<Component />);
+
+  act(() => mainClient.__emitter__.emit(Event.SDK_READY)); // trigger re-render
+  act(() => mainClient.__emitter__.emit(Event.SDK_UPDATE)); // do not trigger re-render because updateOnSdkUpdate is false by default
+  expect(rendersCount).toBe(2);
+
+  wrapper.rerender(<Component updateOnSdkUpdate={true} />); // trigger re-render
+  act(() => mainClient.__emitter__.emit(Event.SDK_UPDATE)); // trigger re-render because updateOnSdkUpdate is true now
+
+  expect(rendersCount).toBe(4);
+
+  wrapper.rerender(<Component updateOnSdkUpdate={false} />); // trigger re-render
+  act(() => mainClient.__emitter__.emit(Event.SDK_UPDATE)); // do not trigger re-render because updateOnSdkUpdate is false now
+
+  expect(rendersCount).toBe(5);
+});

src/useSplitClient.ts

@@ -17,8 +17,10 @@ const DEFAULT_OPTIONS = {
  * @return A Split Context object
  * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#advanced-instantiate-multiple-sdk-clients}
  */
-export function useSplitClient(key?: SplitIO.SplitKey, trafficType?: string, attributes?: SplitIO.Attributes, options: IUpdateProps = {}): ISplitContextValues {
-  options = { ...DEFAULT_OPTIONS, ...options };
+export function useSplitClient(key?: SplitIO.SplitKey, trafficType?: string, attributes?: SplitIO.Attributes, options?: IUpdateProps): ISplitContextValues {
+  const {
+    updateOnSdkReady, updateOnSdkReadyFromCache, updateOnSdkTimedout, updateOnSdkUpdate
+  } = { ...DEFAULT_OPTIONS, ...options };
 
   const context = React.useContext(SplitContext);
   const { client: contextClient, factory } = context;
@@ -35,37 +37,23 @@ export function useSplitClient(key?: SplitIO.SplitKey, trafficType?: string, att
   React.useEffect(() => {
     if (!client) return;
 
-    const setReady = () => {
-      if (options.updateOnSdkReady) setLastUpdate(client.lastUpdate);
-    }
-
-    const setReadyFromCache = () => {
-      if (options.updateOnSdkReadyFromCache) setLastUpdate(client.lastUpdate);
-    }
-
-    const setTimedout = () => {
-      if (options.updateOnSdkTimedout) setLastUpdate(client.lastUpdate);
-    }
-
-    const setUpdate = () => {
-      if (options.updateOnSdkUpdate) setLastUpdate(client.lastUpdate);
-    }
+    const update = () => setLastUpdate(client.lastUpdate);
 
     // Subscribe to SDK events
     const status = getStatus(client);
-    if (!status.isReady) client.once(client.Event.SDK_READY, setReady);
-    if (!status.isReadyFromCache) client.once(client.Event.SDK_READY_FROM_CACHE, setReadyFromCache);
-    if (!status.hasTimedout && !status.isReady) client.once(client.Event.SDK_READY_TIMED_OUT, setTimedout);
-    client.on(client.Event.SDK_UPDATE, setUpdate);
+    if (!status.isReady && updateOnSdkReady) client.once(client.Event.SDK_READY, update);
+    if (!status.isReadyFromCache && updateOnSdkReadyFromCache) client.once(client.Event.SDK_READY_FROM_CACHE, update);
+    if (!status.hasTimedout && !status.isReady && updateOnSdkTimedout) client.once(client.Event.SDK_READY_TIMED_OUT, update);
+    if (updateOnSdkUpdate) client.on(client.Event.SDK_UPDATE, update);
 
     return () => {
       // Unsubscribe from events
-      client.off(client.Event.SDK_READY, setReady);
-      client.off(client.Event.SDK_READY_FROM_CACHE, setReadyFromCache);
-      client.off(client.Event.SDK_READY_TIMED_OUT, setTimedout);
-      client.off(client.Event.SDK_UPDATE, setUpdate);
+      client.off(client.Event.SDK_READY, update);
+      client.off(client.Event.SDK_READY_FROM_CACHE, update);
+      client.off(client.Event.SDK_READY_TIMED_OUT, update);
+      client.off(client.Event.SDK_UPDATE, update);
     }
-  }, [client]);
+  }, [client, updateOnSdkReady, updateOnSdkReadyFromCache, updateOnSdkTimedout, updateOnSdkUpdate]);
 
   return {
     factory, client, ...getStatus(client)