@statsig/react-bindings 3.15.3 → 3.15.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statsig/react-bindings",
-  "version": "3.15.3",
+  "version": "3.15.5",
   "license": "ISC",
   "homepage": "https://github.com/statsig-io/js-client-monorepo",
   "repository": {
@@ -9,8 +9,8 @@
     "directory": "packages/react-bindings"
   },
   "dependencies": {
-    "@statsig/client-core": "3.15.3",
-    "@statsig/js-client": "3.15.3"
+    "@statsig/client-core": "3.15.5",
+    "@statsig/js-client": "3.15.5"
   },
   "peerDependencies": {
     "react": "^16.6.3 || ^17.0.0 || ^18.0.0 || ^19.0.0"

package/src/StatsigContext.d.ts

@@ -2,6 +2,7 @@ import { PrecomputedEvaluationsInterface } from '@statsig/client-core';
 export interface StatsigContext {
     readonly renderVersion: number;
     readonly client: PrecomputedEvaluationsInterface;
+    readonly isLoading: boolean;
 }
 declare const _default: import("react").Context<StatsigContext>;
 export default _default;

package/src/StatsigContext.js

@@ -5,4 +5,5 @@ const NoopEvaluationsClient_1 = require("./NoopEvaluationsClient");
 exports.default = (0, react_1.createContext)({
     renderVersion: 0,
     client: NoopEvaluationsClient_1.NoopEvaluationsClient,
+    isLoading: true,
 });

package/src/StatsigProvider.js

@@ -19,25 +19,36 @@ exports.StatsigProvider = StatsigProvider;
 function ConfigBasedStatsigProvider(props) {
     const [renderVersion, setRenderVersion] = (0, react_1.useState)(0);
     const client = (0, useClientAsyncInit_1.useClientAsyncInit)(props.sdkKey, props.user, props.options).client;
-    useStatsigClientSetup(client, setRenderVersion);
-    const contextValue = (0, react_1.useMemo)(() => ({ renderVersion, client }), [renderVersion, client]);
-    return ((0, jsx_runtime_1.jsx)(StatsigContext_1.default.Provider, { value: contextValue, children: props.loadingComponent == null || _isReady(client)
+    const [isLoading, setIsLoading] = (0, react_1.useState)(!_isReady(client));
+    useStatsigClientSetup(client, setRenderVersion, setIsLoading);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        renderVersion,
+        client,
+        isLoading,
+    }), [renderVersion, client, isLoading]);
+    return ((0, jsx_runtime_1.jsx)(StatsigContext_1.default.Provider, { value: contextValue, children: props.loadingComponent == null || !contextValue.isLoading
             ? props.children
             : props.loadingComponent }));
 }
 function ClientBasedStatsigProvider(props) {
     const [renderVersion, setRenderVersion] = (0, react_1.useState)(0);
     const client = props.client;
-    useStatsigClientSetup(client, setRenderVersion);
-    const contextValue = (0, react_1.useMemo)(() => ({ renderVersion, client }), [renderVersion, client]);
-    return ((0, jsx_runtime_1.jsx)(StatsigContext_1.default.Provider, { value: contextValue, children: props.loadingComponent == null || _isReady(client)
+    const [isLoading, setIsLoading] = (0, react_1.useState)(!_isReady(client));
+    useStatsigClientSetup(client, setRenderVersion, setIsLoading);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        renderVersion,
+        client,
+        isLoading,
+    }), [renderVersion, client, isLoading]);
+    return ((0, jsx_runtime_1.jsx)(StatsigContext_1.default.Provider, { value: contextValue, children: props.loadingComponent == null || !contextValue.isLoading
             ? props.children
             : props.loadingComponent }));
 }
-function useStatsigClientSetup(client, setRenderVersion) {
+function useStatsigClientSetup(client, setRenderVersion, setIsLoading) {
     (0, react_1.useEffect)(() => {
         const onValuesUpdated = () => {
             setRenderVersion((v) => v + 1);
+            setIsLoading(!_isReady(client));
         };
         client_core_1.SDKType._setBindingType('react');
         client.$on('values_updated', onValuesUpdated);

package/src/useStatsigClient.d.ts

@@ -2,6 +2,7 @@ import { PrecomputedEvaluationsInterface } from '@statsig/client-core';
 type HositedFuncs = Pick<PrecomputedEvaluationsInterface, 'checkGate' | 'getFeatureGate' | 'getDynamicConfig' | 'getExperiment' | 'getLayer' | 'getParameterStore' | 'logEvent'>;
 type Output = HositedFuncs & {
     client: PrecomputedEvaluationsInterface;
+    isLoading: boolean;
 };
 export declare function useStatsigClient(): Output;
 export {};

package/src/useStatsigClient.js

@@ -6,7 +6,7 @@ const client_core_1 = require("@statsig/client-core");
 const NoopEvaluationsClient_1 = require("./NoopEvaluationsClient");
 const StatsigContext_1 = require("./StatsigContext");
 function useStatsigClient() {
-    const { client: anyClient, renderVersion } = (0, react_1.useContext)(StatsigContext_1.default);
+    const { client: anyClient, renderVersion, isLoading, } = (0, react_1.useContext)(StatsigContext_1.default);
     const client = (0, react_1.useMemo)(() => {
         if ((0, NoopEvaluationsClient_1.isNoopClient)(anyClient)) {
             client_core_1.Log.warn('Attempting to retrieve a StatsigClient but none was set.');
@@ -49,6 +49,7 @@ function useStatsigClient() {
             getLayer,
             getParameterStore,
             logEvent,
+            isLoading,
         };
     }, [
         client,
@@ -59,6 +60,7 @@ function useStatsigClient() {
         getLayer,
         getParameterStore,
         logEvent,
+        isLoading,
     ]);
 }
 exports.useStatsigClient = useStatsigClient;

package/src/useStatsigUser.js

@@ -4,28 +4,30 @@ exports.useStatsigUser = void 0;
 const react_1 = require("react");
 const StatsigContext_1 = require("./StatsigContext");
 const useStatsigClient_1 = require("./useStatsigClient");
+function getClientUser(client) {
+    const context = client.getContext();
+    return context.user;
+}
 function useStatsigUser() {
     const { client } = (0, useStatsigClient_1.useStatsigClient)();
     const { renderVersion } = (0, react_1.useContext)(StatsigContext_1.default);
-    const deps = [client, renderVersion];
     const memoUser = (0, react_1.useMemo)(() => {
-        const context = client.getContext();
-        return context.user;
-    }, deps);
+        return getClientUser(client);
+    }, [client, renderVersion]);
     return {
         user: memoUser,
         updateUserSync: (0, react_1.useCallback)((arg) => {
             if (typeof arg === 'function') {
-                arg = arg(memoUser);
+                arg = arg(getClientUser(client));
             }
             return client.updateUserSync(arg);
-        }, deps),
+        }, [client]),
         updateUserAsync: (0, react_1.useCallback)((arg) => {
             if (typeof arg === 'function') {
-                arg = arg(memoUser);
+                arg = arg(getClientUser(client));
             }
             return client.updateUserAsync(arg);
-        }, deps),
+        }, [client]),
     };
 }
 exports.useStatsigUser = useStatsigUser;