Bugfix: hook doesn't re-render when an SDK event is emitted between the hook call and the internal effect execution.

Author: EmilianoSanchez

CHANGES.txt

@@ -1,3 +1,6 @@
+1.10.1 (November 21, 2023)
+ - Bugfixing - Resolved an issue with `useSplitClient` hook, which was not re-rendering when an SDK client event was emitted between the hook's call and the execution of its internal effect.
+
 1.10.0 (November 16, 2023)
  - Added support for Flag Sets on the SDK, which enables grouping feature flags and interacting with the group rather than individually (more details in our documentation):
       - Added a new `flagSets` prop to the `SplitTreatments` component and `flagSets` option to the `useSplitTreatments` hook options object, to support evaluating flags in given flag set/s. Either `names` or `flagSets` must be provided to the component and hook. If both are provided, `names` will be used.

src/SplitClient.tsx

@@ -63,10 +63,21 @@ export class SplitComponent extends React.Component<IUpdateProps & { factory: Sp
   // The listeners take into account the value of `updateOnSdk***` props.
   subscribeToEvents(client: SplitIO.IBrowserClient | null) {
     if (client) {
-      const status = getStatus(client);
-      if (this.props.updateOnSdkReady && !status.isReady) client.once(client.Event.SDK_READY, this.update);
-      if (this.props.updateOnSdkReadyFromCache && !status.isReadyFromCache) client.once(client.Event.SDK_READY_FROM_CACHE, this.update);
-      if (this.props.updateOnSdkTimedout && !status.hasTimedout) client.once(client.Event.SDK_READY_TIMED_OUT, this.update);
+      const statusOnEffect = getStatus(client);
+      const status = this.state;
+
+      if (this.props.updateOnSdkReady) {
+        if (!statusOnEffect.isReady) client.once(client.Event.SDK_READY, this.update);
+        else if (!status.isReady) this.update();
+      }
+      if (this.props.updateOnSdkReadyFromCache) {
+        if (!statusOnEffect.isReadyFromCache) client.once(client.Event.SDK_READY_FROM_CACHE, this.update);
+        else if (!status.isReadyFromCache) this.update();
+      }
+      if (this.props.updateOnSdkTimedout) {
+        if (!statusOnEffect.hasTimedout) client.once(client.Event.SDK_READY_TIMED_OUT, this.update);
+        else if (!status.hasTimedout) this.update();
+      }
       if (this.props.updateOnSdkUpdate) client.on(client.Event.SDK_UPDATE, this.update);
     }
   }

src/useSplitClient.ts

@@ -47,10 +47,20 @@ export function useSplitClient(options?: IUseSplitClientOptions): ISplitContextV
     const update = () => setLastUpdate(client.lastUpdate);
 
     // Subscribe to SDK events
-    const status = getStatus(client);
-    if (updateOnSdkReady && !status.isReady) client.once(client.Event.SDK_READY, update);
-    if (updateOnSdkReadyFromCache && !status.isReadyFromCache) client.once(client.Event.SDK_READY_FROM_CACHE, update);
-    if (updateOnSdkTimedout && !status.hasTimedout) client.once(client.Event.SDK_READY_TIMED_OUT, update);
+    const statusOnEffect = getStatus(client); // Effect call is not synchronous, so the status may have changed
+
+    if (updateOnSdkReady) {
+      if (!statusOnEffect.isReady) client.once(client.Event.SDK_READY, update);
+      else if (!status.isReady) update();
+    }
+    if (updateOnSdkReadyFromCache) {
+      if (!statusOnEffect.isReadyFromCache) client.once(client.Event.SDK_READY_FROM_CACHE, update);
+      else if (!status.isReadyFromCache) update();
+    }
+    if (updateOnSdkTimedout) {
+      if (!statusOnEffect.hasTimedout) client.once(client.Event.SDK_READY_TIMED_OUT, update);
+      else if (!status.hasTimedout) update();
+    }
     if (updateOnSdkUpdate) client.on(client.Event.SDK_UPDATE, update);
 
     return () => {
@@ -60,7 +70,7 @@ export function useSplitClient(options?: IUseSplitClientOptions): ISplitContextV
       client.off(client.Event.SDK_READY_TIMED_OUT, update);
       client.off(client.Event.SDK_UPDATE, update);
     }
-  }, [client, updateOnSdkReady, updateOnSdkReadyFromCache, updateOnSdkTimedout, updateOnSdkUpdate]);
+  }, [client, updateOnSdkReady, updateOnSdkReadyFromCache, updateOnSdkTimedout, updateOnSdkUpdate, status]);
 
   return {
     factory, client, ...status