request-iframe 0.0.3 → 0.0.4

package/react/library/index.js

@@ -55,37 +55,73 @@ var _ = require("../..");
  * ```
  */
 function useClient(targetFnOrRef, options, deps) {
+  var clientRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     client = _useState2[0],
     setClient = _useState2[1];
-  (0, _react.useEffect)(() => {
-    // Get current target
-    var target = typeof targetFnOrRef === 'function' ? targetFnOrRef() : targetFnOrRef.current;
+  var lastTargetRef = (0, _react.useRef)(null);
+  var targetFnOrRefRef = (0, _react.useRef)(targetFnOrRef);
+  var optionsRef = (0, _react.useRef)(options);
 
-    // Destroy existing client if it exists
-    if (client) {
-      client.destroy();
-      setClient(null);
+  /** Keep latest inputs without re-creating effect deps */
+  targetFnOrRefRef.current = targetFnOrRef;
+  optionsRef.current = options;
+  var getTarget = (0, _react.useCallback)(() => {
+    return typeof targetFnOrRefRef.current === 'function' ? targetFnOrRefRef.current() : targetFnOrRefRef.current.current;
+  }, []);
+
+  /**
+   * Snapshot the current target during render (pure read).
+   * We use this value as an effect dependency so the effect only runs when
+   * the target actually changes (avoids StrictMode update-depth loops).
+   */
+  var target = getTarget();
+  var destroy = (0, _react.useCallback)(() => {
+    if (clientRef.current) {
+      clientRef.current.destroy();
+      clientRef.current = null;
     }
+    lastTargetRef.current = null;
+  }, []);
+
+  /**
+   * Create/destroy client in effect to be compatible with React 18 StrictMode
+   * and concurrent rendering (avoid render-phase side effects).
+   */
+  (0, _react.useEffect)(() => {
+    /** If target unchanged, keep current client */
+    if (target === lastTargetRef.current) return;
 
-    // Only create client if target is available
+    /** Target changed: destroy old client and maybe create a new one */
+    if (clientRef.current) {
+      clientRef.current.destroy();
+      clientRef.current = null;
+    }
+    lastTargetRef.current = target;
     if (!target) {
+      setClient(null);
       return;
     }
-
-    // Create new client instance
-    var newClient = (0, _.requestIframeClient)(target, options);
+    var newClient = (0, _.requestIframeClient)(target, optionsRef.current);
+    clientRef.current = newClient;
     setClient(newClient);
-
-    // Cleanup: destroy client on unmount
     return () => {
-      if (newClient) {
+      /** Cleanup only if it's still the current client */
+      if (clientRef.current === newClient) {
         newClient.destroy();
-        setClient(null);
+        clientRef.current = null;
+        lastTargetRef.current = null;
       }
     };
-  }, deps !== undefined ? deps : []);
+  }, deps ? [...deps, target] : [target]);
+
+  // Cleanup on unmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      destroy();
+    };
+  }, []);
   return client;
 }
 
@@ -113,24 +149,46 @@ function useClient(targetFnOrRef, options, deps) {
  * ```
  */
 function useServer(options, deps) {
+  var serverRef = (0, _react.useRef)(null);
   var _useState3 = (0, _react.useState)(null),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     server = _useState4[0],
     setServer = _useState4[1];
+  var optionsRef = (0, _react.useRef)(options);
+  optionsRef.current = options;
+  var destroy = (0, _react.useCallback)(() => {
+    if (serverRef.current) {
+      serverRef.current.destroy();
+      serverRef.current = null;
+    }
+  }, []);
+
+  /**
+   * Create/destroy server in effect to be compatible with React 18 StrictMode
+   * and concurrent rendering (avoid render-phase side effects).
+   */
   (0, _react.useEffect)(() => {
-    // Create server instance
-    var newServer = (0, _.requestIframeServer)(options);
+    if (serverRef.current) {
+      serverRef.current.destroy();
+      serverRef.current = null;
+    }
+    var newServer = (0, _.requestIframeServer)(optionsRef.current);
+    serverRef.current = newServer;
     setServer(newServer);
-
-    // Cleanup: destroy server on unmount
     return () => {
-      if (newServer) {
+      if (serverRef.current === newServer) {
         newServer.destroy();
-        setServer(null);
+        serverRef.current = null;
       }
     };
-  }, deps !== undefined ? deps : []); // Only create once on mount by default
+  }, deps !== null && deps !== void 0 ? deps : []);
 
+  // Cleanup on unmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      destroy();
+    };
+  }, []);
   return server;
 }
 

package/react/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@request-iframe/react",
+  "version": "0.0.1",
+  "main": "./library/index.js",
+  "module": "./library/index.js",
+  "typings": "./library/index.d.ts"
+}