@flipfeatureflag/react 0.1.4 → 0.1.6

package/dist/index.js

@@ -46,15 +46,53 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var FlipFlagContext = import_react.default.createContext(null);
 var FlipFlagStatusContext = import_react.default.createContext({ ready: false });
 function FlipFlagProvider({ client, config, children }) {
-  const { resolvedClient, ownsClient } = (0, import_react.useMemo)(() => {
-    if (client) {
-      return { resolvedClient: client, ownsClient: false };
+  const configKey = (0, import_react.useMemo)(() => {
+    if (!config) {
+      return "";
     }
+    return [
+      config.url,
+      config.sdkKey,
+      config.env ?? "",
+      String(config.refreshIntervalMs ?? ""),
+      String(config.metricsIntervalMs ?? ""),
+      String(config.disableRefresh ?? false),
+      String(config.disableMetrics ?? false)
+    ].join("|");
+  }, [
+    config?.url,
+    config?.sdkKey,
+    config?.env,
+    config?.refreshIntervalMs,
+    config?.metricsIntervalMs,
+    config?.disableRefresh,
+    config?.disableMetrics
+  ]);
+  const clientRef = (0, import_react.useRef)(null);
+  const ownsRef = (0, import_react.useRef)(false);
+  const configKeyRef = (0, import_react.useRef)(configKey);
+  if (client) {
+    clientRef.current = client;
+    ownsRef.current = false;
+    configKeyRef.current = configKey;
+  } else {
     if (!config) {
       throw new Error("flipFeatureFlagProvider requires client or config");
     }
-    return { resolvedClient: (0, import_js.createClient)(config), ownsClient: true };
-  }, [client, config]);
+    if (!clientRef.current || configKeyRef.current !== configKey) {
+      if (clientRef.current && ownsRef.current) {
+        clientRef.current.stop();
+      }
+      clientRef.current = (0, import_js.createClient)(config);
+      ownsRef.current = true;
+      configKeyRef.current = configKey;
+    }
+  }
+  const resolvedClient = clientRef.current;
+  if (!resolvedClient) {
+    throw new Error("flipFeatureFlagProvider requires client or config");
+  }
+  const ownsClient = ownsRef.current;
   const [status, setStatus] = (0, import_react.useState)(resolvedClient.getStatus());
   (0, import_react.useEffect)(() => {
     let mounted = true;

package/dist/index.mjs

@@ -1,20 +1,58 @@
 // src/index.tsx
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { createClient as createBrowserClient } from "@flipfeatureflag/js";
 import { FlipFlagClient } from "@flipfeatureflag/core";
 import { jsx } from "react/jsx-runtime";
 var FlipFlagContext = React.createContext(null);
 var FlipFlagStatusContext = React.createContext({ ready: false });
 function FlipFlagProvider({ client, config, children }) {
-  const { resolvedClient, ownsClient } = useMemo(() => {
-    if (client) {
-      return { resolvedClient: client, ownsClient: false };
+  const configKey = useMemo(() => {
+    if (!config) {
+      return "";
     }
+    return [
+      config.url,
+      config.sdkKey,
+      config.env ?? "",
+      String(config.refreshIntervalMs ?? ""),
+      String(config.metricsIntervalMs ?? ""),
+      String(config.disableRefresh ?? false),
+      String(config.disableMetrics ?? false)
+    ].join("|");
+  }, [
+    config?.url,
+    config?.sdkKey,
+    config?.env,
+    config?.refreshIntervalMs,
+    config?.metricsIntervalMs,
+    config?.disableRefresh,
+    config?.disableMetrics
+  ]);
+  const clientRef = useRef(null);
+  const ownsRef = useRef(false);
+  const configKeyRef = useRef(configKey);
+  if (client) {
+    clientRef.current = client;
+    ownsRef.current = false;
+    configKeyRef.current = configKey;
+  } else {
     if (!config) {
       throw new Error("flipFeatureFlagProvider requires client or config");
     }
-    return { resolvedClient: createBrowserClient(config), ownsClient: true };
-  }, [client, config]);
+    if (!clientRef.current || configKeyRef.current !== configKey) {
+      if (clientRef.current && ownsRef.current) {
+        clientRef.current.stop();
+      }
+      clientRef.current = createBrowserClient(config);
+      ownsRef.current = true;
+      configKeyRef.current = configKey;
+    }
+  }
+  const resolvedClient = clientRef.current;
+  if (!resolvedClient) {
+    throw new Error("flipFeatureFlagProvider requires client or config");
+  }
+  const ownsClient = ownsRef.current;
   const [status, setStatus] = useState(resolvedClient.getStatus());
   useEffect(() => {
     let mounted = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipfeatureflag/react",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "flipFeatureFlag React SDK",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -20,7 +20,7 @@
     "react": ">=17"
   },
   "dependencies": {
-    "@flipfeatureflag/core": "0.1.3",
-    "@flipfeatureflag/js": "0.1.4"
+    "@flipfeatureflag/core": "0.1.5",
+    "@flipfeatureflag/js": "0.1.6"
   }
 }

package/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect, useMemo, useState } from "react";
+import React, { PropsWithChildren, useEffect, useMemo, useRef, useState } from "react";
 import { FlipFlagClient, FlipFlagClientOptions, FlagsStatus, SdkFlagEvaluation } from "@flipfeatureflag/core";
 import { createClient as createBrowserClient } from "@flipfeatureflag/js";
 
@@ -11,15 +11,56 @@ const FlipFlagContext = React.createContext<FlipFlagClient | null>(null);
 const FlipFlagStatusContext = React.createContext<FlagsStatus>({ ready: false });
 
 export function FlipFlagProvider({ client, config, children }: PropsWithChildren<FlipFlagProviderProps>) {
-  const { resolvedClient, ownsClient } = useMemo(() => {
-    if (client) {
-      return { resolvedClient: client, ownsClient: false };
+  const configKey = useMemo(() => {
+    if (!config) {
+      return "";
     }
+    return [
+      config.url,
+      config.sdkKey,
+      config.env ?? "",
+      String(config.refreshIntervalMs ?? ""),
+      String(config.metricsIntervalMs ?? ""),
+      String(config.disableRefresh ?? false),
+      String(config.disableMetrics ?? false),
+    ].join("|");
+  }, [
+    config?.url,
+    config?.sdkKey,
+    config?.env,
+    config?.refreshIntervalMs,
+    config?.metricsIntervalMs,
+    config?.disableRefresh,
+    config?.disableMetrics,
+  ]);
+
+  const clientRef = useRef<FlipFlagClient | null>(null);
+  const ownsRef = useRef(false);
+  const configKeyRef = useRef(configKey);
+
+  if (client) {
+    clientRef.current = client;
+    ownsRef.current = false;
+    configKeyRef.current = configKey;
+  } else {
     if (!config) {
       throw new Error("flipFeatureFlagProvider requires client or config");
     }
-    return { resolvedClient: createBrowserClient(config), ownsClient: true };
-  }, [client, config]);
+    if (!clientRef.current || configKeyRef.current !== configKey) {
+      if (clientRef.current && ownsRef.current) {
+        clientRef.current.stop();
+      }
+      clientRef.current = createBrowserClient(config);
+      ownsRef.current = true;
+      configKeyRef.current = configKey;
+    }
+  }
+
+  const resolvedClient = clientRef.current;
+  if (!resolvedClient) {
+    throw new Error("flipFeatureFlagProvider requires client or config");
+  }
+  const ownsClient = ownsRef.current;
 
   const [status, setStatus] = useState<FlagsStatus>(resolvedClient.getStatus());