Merge pull request #232 from splitio/fix_useSplitClient

Fix `useSplitClient` hook to properly respect `updateOn<Event>` options when the function is re-called

Author: EmilianoSanchez

CHANGES.txt

@@ -1,3 +1,6 @@
+2.1.1 (April 8, 2025)
+ - Bugfix - Fixed `useSplitClient` and `useSplitTreatments` hooks to properly respect `updateOn<Event>` options. Previously, if the hooks were re-called due to a component re-render, they used the latest version of the SDK client status ignoring when `updateOn<Event>` options were set to `false` and resulting in unexpected changes in treatment values.
+
 2.1.0 (March 28, 2025)
  - Added a new optional `properties` argument to the options object of the `useSplitTreatments` hook, allowing to pass a map of properties to append to the generated impressions sent to Split backend. Read more in our docs.
  - Updated @splitsoftware/splitio package to version 11.2.0 that includes some minor updates:

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splitsoftware/splitio-react",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "A React library to easily integrate and use Split JS SDK",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package.json

@@ -200,36 +200,37 @@ let renderTimes = 0;
  * Tests for asserting that client.getTreatmentsWithConfig and client.getTreatmentsWithConfigByFlagSets are not called unnecessarily when using SplitTreatments and useSplitTreatments.
  */
 describe.each([
-  ({ names, flagSets, attributes }: { names?: string[], flagSets?: string[], attributes?: SplitIO.Attributes }) => (
+  ({ names, flagSets, attributes, updateOnSdkUpdate }: { names?: string[], flagSets?: string[], attributes?: SplitIO.Attributes, updateOnSdkUpdate?: boolean }) => (
     // @ts-expect-error names and flagSets are mutually exclusive
-    <SplitTreatments names={names} attributes={attributes} flagSets={flagSets} >
+    <SplitTreatments names={names} attributes={attributes} flagSets={flagSets} updateOnSdkUpdate={updateOnSdkUpdate} >
       {() => {
         renderTimes++;
         return null;
       }}
     </SplitTreatments>
   ),
-  ({ names, flagSets, attributes }: { names?: string[], flagSets?: string[], attributes?: SplitIO.Attributes }) => {
+  ({ names, flagSets, attributes, updateOnSdkUpdate }: { names?: string[], flagSets?: string[], attributes?: SplitIO.Attributes, updateOnSdkUpdate?: boolean }) => {
     // @ts-expect-error names and flagSets are mutually exclusive
-    useSplitTreatments({ names, flagSets, attributes });
+    useSplitTreatments({ names, flagSets, attributes, updateOnSdkUpdate });
     renderTimes++;
     return null;
   }
 ])('SplitTreatments & useSplitTreatments optimization', (InnerComponent) => {
   let outerFactory = SplitFactory(sdkBrowser);
   (outerFactory as any).client().__emitter__.emit(Event.SDK_READY);
 
-  function Component({ names, flagSets, attributes, splitKey, clientAttributes }: {
+  function Component({ names, flagSets, attributes, splitKey, clientAttributes, updateOnSdkUpdate }: {
     names?: ISplitTreatmentsProps['names']
     flagSets?: ISplitTreatmentsProps['flagSets']
     attributes: ISplitTreatmentsProps['attributes']
     splitKey: ISplitClientProps['splitKey']
-    clientAttributes?: ISplitClientProps['attributes']
+    clientAttributes?: ISplitClientProps['attributes'],
+    updateOnSdkUpdate?: boolean
   }) {
     return (
       <SplitFactoryProvider factory={outerFactory} >
         <SplitClient splitKey={splitKey} attributes={clientAttributes} >
-          <InnerComponent names={names} attributes={attributes} flagSets={flagSets} />
+          <InnerComponent names={names} attributes={attributes} flagSets={flagSets} updateOnSdkUpdate={updateOnSdkUpdate} />
         </SplitClient>
       </SplitFactoryProvider>
     );
@@ -322,6 +323,17 @@ describe.each([
     (outerFactory as any).client().__emitter__.emit(Event.SDK_READY);
   });
 
+  it('rerenders and does not re-evaluate feature flags if lastUpdate timestamp does not change (e.g., SDK_UPDATE event but `updateOnSdkUpdate` false).', () => {
+    wrapper.rerender(<Component names={names} flagSets={flagSets} attributes={attributes} splitKey={splitKey} updateOnSdkUpdate={false} />);
+    expect(renderTimes).toBe(2);
+    expect(outerFactory.client().getTreatmentsWithConfig).toBeCalledTimes(1);
+
+    // SDK_UPDATE doesn't re-evaluate due to updateOnSdkUpdate false
+    act(() => (outerFactory as any).client().__emitter__.emit(Event.SDK_UPDATE));
+    expect(renderTimes).toBe(3);
+    expect(outerFactory.client().getTreatmentsWithConfig).toBeCalledTimes(1);
+  });
+
   it('rerenders and re-evaluates feature flags if client changes.', async () => {
     wrapper.rerender(<Component names={names} attributes={attributes} splitKey={'otherKey'} />);
     await act(() => (outerFactory as any).client('otherKey').__emitter__.emit(Event.SDK_READY));

src/__tests__/SplitTreatments.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { act, render } from '@testing-library/react';
+import { act, fireEvent, render } from '@testing-library/react';
 
 /** Mocks */
 import { mockSdk, Event } from './testUtils/mockSplitFactory';
@@ -87,8 +87,9 @@ describe('useSplitClient', () => {
 
     let countSplitContext = 0, countUseSplitClient = 0, countUseSplitClientUser2 = 0;
     let countUseSplitClientWithoutUpdate = 0, countUseSplitClientUser2WithoutTimeout = 0;
+    let previousLastUpdate = -1;
 
-    render(
+    const { getByTestId } = render(
       <SplitFactoryProvider factory={outerFactory} >
         <>
           <SplitContext.Consumer>
@@ -129,9 +130,35 @@ describe('useSplitClient', () => {
             return null;
           })}
           {React.createElement(() => {
-            useSplitClient({ splitKey: sdkBrowser.core.key, updateOnSdkUpdate: false }).client;
+            const [state, setState] = React.useState(false);
+
+            const { isReady, isReadyFromCache, hasTimedout, lastUpdate } = useSplitClient({ splitKey: sdkBrowser.core.key, updateOnSdkUpdate: false });
             countUseSplitClientWithoutUpdate++;
-            return null;
+            switch (countUseSplitClientWithoutUpdate) {
+              case 1: // initial render
+                expect([isReady, isReadyFromCache, hasTimedout]).toEqual([false, false, false]);
+                expect(lastUpdate).toBe(0);
+                break;
+              case 2: // SDK_READY_FROM_CACHE
+                expect([isReady, isReadyFromCache, hasTimedout]).toEqual([false, true, false]);
+                expect(lastUpdate).toBeGreaterThan(previousLastUpdate);
+                break;
+              case 3: // SDK_READY
+                expect([isReady, isReadyFromCache, hasTimedout]).toEqual([true, true, false]);
+                expect(lastUpdate).toBeGreaterThan(previousLastUpdate);
+                break;
+              case 4: // Forced re-render, lastUpdate doesn't change after SDK_UPDATE due to updateOnSdkUpdate = false
+                expect([isReady, isReadyFromCache, hasTimedout]).toEqual([true, true, false]);
+                expect(lastUpdate).toBe(previousLastUpdate);
+                break;
+              default:
+                throw new Error('Unexpected render');
+            }
+
+            previousLastUpdate = lastUpdate;
+            return (
+              <button data-testid="update-button" onClick={() => setState(!state)}>Force Update</button>
+            );
           })}
           {React.createElement(() => {
             useSplitClient({ splitKey: 'user_2', updateOnSdkTimedout: false });
@@ -149,6 +176,7 @@ describe('useSplitClient', () => {
     act(() => user2Client.__emitter__.emit(Event.SDK_READY));
     act(() => mainClient.__emitter__.emit(Event.SDK_UPDATE));
     act(() => user2Client.__emitter__.emit(Event.SDK_UPDATE));
+    act(() => fireEvent.click(getByTestId('update-button')));
 
     // SplitFactoryProvider renders once
     expect(countSplitContext).toEqual(1);
@@ -160,7 +188,7 @@ describe('useSplitClient', () => {
     expect(countUseSplitClientUser2).toEqual(5);
 
     // If useSplitClient retrieves the main client and have updateOnSdkUpdate = false, it doesn't render when the main client updates.
-    expect(countUseSplitClientWithoutUpdate).toEqual(3);
+    expect(countUseSplitClientWithoutUpdate).toEqual(4);
 
     // If useSplitClient retrieves a different client and have updateOnSdkTimedout = false, it doesn't render when the the new client times out.
     expect(countUseSplitClientUser2WithoutTimeout).toEqual(4);

src/__tests__/useSplitClient.test.tsx

@@ -37,8 +37,10 @@ export function useSplitClient(options?: IUseSplitClientOptions): ISplitContextV
 
   initAttributes(client, attributes);
 
-  const status = getStatus(client);
-  const [, setLastUpdate] = React.useState(status.lastUpdate);
+  const [lastUpdate, setLastUpdate] = React.useState(0);
+  // `getStatus` is not pure. Its result depends on `client` and `lastUpdate`
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const status = React.useMemo(() => getStatus(client), [client, lastUpdate]);
 
   // Handle client events
   React.useEffect(() => {