@quiltt/react 4.3.1 → 4.3.2

package/CHANGELOG.md

@@ -1,10 +1,20 @@
 # @quiltt/react
 
+## 4.3.2
+
+### Patch Changes
+
+- [#372](https://github.com/quiltt/quiltt-js/pull/372) [`c022ebe`](https://github.com/quiltt/quiltt-js/commit/c022ebed0c82404a1bdbf5abbaf6e60b49f2d07a) Thanks [@sirwolfgang](https://github.com/sirwolfgang)! - Hardened React SDK against unstable prop references by implementing ref-based callback wrappers and deep equality checks, eliminating unnecessary re-renders, event handler churn, and API calls without requiring customers to use useCallback.
+
+- Updated dependencies [[`c022ebe`](https://github.com/quiltt/quiltt-js/commit/c022ebed0c82404a1bdbf5abbaf6e60b49f2d07a)]:
+  - @quiltt/core@4.3.2
+
 ## 4.3.1
 
 ### Patch Changes
 
 - [#366](https://github.com/quiltt/quiltt-js/pull/366) [`dc376b5`](https://github.com/quiltt/quiltt-js/commit/dc376b52dd824d7867ca74677bbfd5c54eff5cdc) Thanks [@sirwolfgang](https://github.com/sirwolfgang)! - Warn if useQuilttConnector is unmounted while in use
+- [#365](https://github.com/quiltt/quiltt-js/pull/365) [`5f6b8af`](https://github.com/quiltt/quiltt-js/commit/5f6b8af153086c77bb2227d43ae7023fb0c47985) Thanks [@rubendinho](https://github.com/rubendinho)! - Standardize SDK agent tracking header to `Quiltt-SDK-Agent` and add support for custom Apollo Links injection
 
 - Updated dependencies [[`dc376b5`](https://github.com/quiltt/quiltt-js/commit/dc376b52dd824d7867ca74677bbfd5c54eff5cdc)]:
   - @quiltt/core@4.3.1

package/dist/{QuilttAuthProvider-12s-BZuGySu0.js → QuilttAuthProvider-12s-D-Wr7LUT.js}

@@ -7,7 +7,7 @@ import './useSession-12s-7GOn4sUn.js';
 import 'use-debounce';
 import { jsx } from 'react/jsx-runtime';
 import { ApolloProvider } from '@apollo/client/react/context/ApolloProvider.js';
-import { u as useQuilttSession } from './useQuilttSession-12s-CM6ALGSN.js';
+import { u as useQuilttSession } from './useQuilttSession-12s-CwVw-aOM.js';
 
 const useAuthenticateSession = (auth, setSession)=>{
     const authenticateSession = useCallback(async (payload, callbacks)=>{
@@ -133,8 +133,9 @@ const useRevokeSession = (auth, session, setSession)=>{
     }
     if (obj1 instanceof Set && obj2 instanceof Set) {
         if (obj1.size !== obj2.size) return false;
+        const arr2 = Array.from(obj2);
         for (const item of obj1){
-            if (!Array.from(obj2).some((value)=>isDeepEqual(item, value))) return false;
+            if (!arr2.some((value)=>isDeepEqual(item, value))) return false;
         }
         return true;
     }
@@ -161,15 +162,22 @@ const useRevokeSession = (auth, session, setSession)=>{
  */ const QuilttAuthProvider = ({ graphqlClient, token, children })=>{
     const { session, importSession } = useQuilttSession();
     const previousSessionRef = useRef(session);
+    const previousTokenRef = useRef();
     // Memoize the client to avoid unnecessary re-renders
     const apolloClient = useMemo(()=>graphqlClient || new QuilttClient({
             cache: new InMemoryCache()
         }), [
         graphqlClient
     ]);
-    // Import passed in token
+    // Import passed in token (only if value has changed)
     useEffect(()=>{
-        if (token) importSession(token);
+        if (token && token !== previousTokenRef.current) {
+            importSession(token);
+            previousTokenRef.current = token;
+        } else if (!token) {
+            // Reset ref when token becomes undefined to allow re-import of same token later
+            previousTokenRef.current = undefined;
+        }
     }, [
         token,
         importSession

package/dist/index.js

@@ -1,14 +1,14 @@
 export * from '@quiltt/core';
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
-import { u as useQuilttConnector } from './useQuilttConnector-12s-CL6uHdqe.js';
-import { i as isDeepEqual, Q as QuilttAuthProvider } from './QuilttAuthProvider-12s-BZuGySu0.js';
-export { b as useAuthenticateSession, a as useIdentifySession, u as useImportSession, c as useRevokeSession } from './QuilttAuthProvider-12s-BZuGySu0.js';
+import { u as useQuilttConnector } from './useQuilttConnector-12s-BJljrsWT.js';
+import { i as isDeepEqual, Q as QuilttAuthProvider } from './QuilttAuthProvider-12s-D-Wr7LUT.js';
+export { b as useAuthenticateSession, a as useIdentifySession, u as useImportSession, c as useRevokeSession } from './QuilttAuthProvider-12s-D-Wr7LUT.js';
 export { u as useEventListener } from './useEventListener-12s-D_-6QIXa.js';
 export { u as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect-12s-DeTHOKz1.js';
 export { u as useQuilttClient } from './useQuilttClient-12s-CAAUait1.js';
-export { u as useQuilttInstitutions } from './useQuilttInstitutions-12s-FLdw-CQZ.js';
-export { u as useQuilttSession } from './useQuilttSession-12s-CM6ALGSN.js';
+export { u as useQuilttInstitutions } from './useQuilttInstitutions-12s-PJd2C3BF.js';
+export { u as useQuilttSession } from './useQuilttSession-12s-CwVw-aOM.js';
 export { u as useQuilttSettings } from './useQuilttSettings-12s--rCJoNHD.js';
 export { u as useSession } from './useSession-12s-7GOn4sUn.js';
 export { u as useStorage } from './useStorage-12s-DHcq3Kuh.js';
@@ -78,9 +78,11 @@ import { Q as QuilttSettingsProvider } from './QuilttSettingsProvider-12s-ZcmFmO
         // 1. Pre-open validation
         // 2. Preventing opening via event.preventDefault()
         // 3. Setting up state before connector opens
-        if (onClick) onClick(event);
-        // Then open the Quiltt connector
-        open();
+        onClick?.(event);
+        // Only open if event wasn't prevented
+        if (!event.defaultPrevented) {
+            open();
+        }
     };
     // Generate key for forced remounting if enabled, but respect user-provided key
     const buttonKey = props.key ?? (forceRemountOnConnectionChange ? `${connectorId}-${connectionId || 'no-connection'}` : undefined);

package/dist/{useQuilttConnector-12s-CL6uHdqe.js → useQuilttConnector-12s-BJljrsWT.js}

@@ -1,10 +1,11 @@
 'use client';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { cdnBase } from '@quiltt/core';
-import { u as useQuilttSession } from './useQuilttSession-12s-CM6ALGSN.js';
+import { u as useQuilttSession } from './useQuilttSession-12s-CwVw-aOM.js';
 import { u as useScript } from './useScript-12s-JCgaTW9n.js';
+import { i as isDeepEqual } from './QuilttAuthProvider-12s-D-Wr7LUT.js';
 
-var version = "4.3.1";
+var version = "4.3.2";
 
 const useQuilttConnector = (connectorId, options)=>{
     const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`, {
@@ -18,9 +19,15 @@ const useQuilttConnector = (connectorId, options)=>{
     // Keep track of the previous connectionId to detect changes
     const prevConnectionIdRef = useRef(options?.connectionId);
     const prevConnectorIdRef = useRef(connectorId);
+    const prevInstitutionRef = useRef(options?.institution);
     const connectorCreatedRef = useRef(false);
     // Track whether the connector is currently open
     const isConnectorOpenRef = useRef(false);
+    // Store callbacks in refs to maintain stable references
+    const callbacksRef = useRef(options || {});
+    useEffect(()=>{
+        callbacksRef.current = options || {};
+    });
     // Set Session
     // biome-ignore lint/correctness/useExhaustiveDependencies: trigger effects when script status changes too
     useEffect(()=>{
@@ -36,10 +43,11 @@ const useQuilttConnector = (connectorId, options)=>{
         if (typeof Quiltt === 'undefined' || !connectorId) return;
         const currentConnectionId = options?.connectionId;
         const currentInstitution = options?.institution;
-        // Check for changes
+        // Check for changes - use deep equality for institution object
         const connectionIdChanged = prevConnectionIdRef.current !== currentConnectionId;
         const connectorIdChanged = prevConnectorIdRef.current !== connectorId;
-        const hasChanges = connectionIdChanged || connectorIdChanged || !connectorCreatedRef.current;
+        const institutionChanged = !isDeepEqual(prevInstitutionRef.current, currentInstitution);
+        const hasChanges = connectionIdChanged || connectorIdChanged || institutionChanged || !connectorCreatedRef.current;
         // Update if there are changes, regardless of what the changes are
         if (hasChanges) {
             if (currentConnectionId) {
@@ -57,6 +65,7 @@ const useQuilttConnector = (connectorId, options)=>{
             connectorCreatedRef.current = true;
             prevConnectionIdRef.current = currentConnectionId;
             prevConnectorIdRef.current = connectorId;
+            prevInstitutionRef.current = currentInstitution;
         }
     }, [
         connectorId,
@@ -64,56 +73,69 @@ const useQuilttConnector = (connectorId, options)=>{
         options?.institution,
         status
     ]);
-    // Internal handlers to track connector state
+    // Internal handlers to track connector state (stable references)
     const handleOpen = useCallback((metadata)=>{
         isConnectorOpenRef.current = true;
-        options?.onOpen?.(metadata);
-    }, [
-        options?.onOpen
-    ]);
+        callbacksRef.current?.onOpen?.(metadata);
+    }, []);
     const handleExit = useCallback((type, metadata)=>{
         isConnectorOpenRef.current = false;
-        options?.onExit?.(type, metadata);
-    }, [
-        options?.onExit
-    ]);
-    // Register event handlers
+        callbacksRef.current?.onExit?.(type, metadata);
+    }, []);
+    // Create stable wrapper functions for callbacks
+    const stableOnEvent = useCallback((type, metadata)=>{
+        callbacksRef.current?.onEvent?.(type, metadata);
+    }, []);
+    const stableOnLoad = useCallback((metadata)=>{
+        callbacksRef.current?.onLoad?.(metadata);
+    }, []);
+    const stableOnExitSuccess = useCallback((metadata)=>{
+        callbacksRef.current?.onExitSuccess?.(metadata);
+    }, []);
+    const stableOnExitAbort = useCallback((metadata)=>{
+        callbacksRef.current?.onExitAbort?.(metadata);
+    }, []);
+    const stableOnExitError = useCallback((metadata)=>{
+        callbacksRef.current?.onExitError?.(metadata);
+    }, []);
+    // Register event handlers (only re-runs when connector changes)
     useEffect(()=>{
         if (!connector) return;
-        const handlers = {
-            onEvent: options?.onEvent,
-            onOpen: handleOpen,
-            onLoad: options?.onLoad,
-            onExit: handleExit,
-            onExitSuccess: options?.onExitSuccess,
-            onExitAbort: options?.onExitAbort,
-            onExitError: options?.onExitError
+        // Capture which handlers we're registering to ensure proper cleanup
+        const registered = {
+            onEvent: callbacksRef.current?.onEvent ? stableOnEvent : null,
+            onOpen: callbacksRef.current?.onOpen ? handleOpen : null,
+            onLoad: callbacksRef.current?.onLoad ? stableOnLoad : null,
+            onExit: callbacksRef.current?.onExit ? handleExit : null,
+            onExitSuccess: callbacksRef.current?.onExitSuccess ? stableOnExitSuccess : null,
+            onExitAbort: callbacksRef.current?.onExitAbort ? stableOnExitAbort : null,
+            onExitError: callbacksRef.current?.onExitError ? stableOnExitError : null
         };
-        if (handlers.onEvent) connector.onEvent(handlers.onEvent);
-        if (handlers.onOpen) connector.onOpen(handlers.onOpen);
-        if (handlers.onLoad) connector.onLoad(handlers.onLoad);
-        if (handlers.onExit) connector.onExit(handlers.onExit);
-        if (handlers.onExitSuccess) connector.onExitSuccess(handlers.onExitSuccess);
-        if (handlers.onExitAbort) connector.onExitAbort(handlers.onExitAbort);
-        if (handlers.onExitError) connector.onExitError(handlers.onExitError);
+        if (registered.onEvent) connector.onEvent(registered.onEvent);
+        if (registered.onOpen) connector.onOpen(registered.onOpen);
+        if (registered.onLoad) connector.onLoad(registered.onLoad);
+        if (registered.onExit) connector.onExit(registered.onExit);
+        if (registered.onExitSuccess) connector.onExitSuccess(registered.onExitSuccess);
+        if (registered.onExitAbort) connector.onExitAbort(registered.onExitAbort);
+        if (registered.onExitError) connector.onExitError(registered.onExitError);
         return ()=>{
-            if (handlers.onEvent) connector.offEvent(handlers.onEvent);
-            if (handlers.onOpen) connector.offOpen(handlers.onOpen);
-            if (handlers.onLoad) connector.offLoad(handlers.onLoad);
-            if (handlers.onExit) connector.offExit(handlers.onExit);
-            if (handlers.onExitSuccess) connector.offExitSuccess(handlers.onExitSuccess);
-            if (handlers.onExitAbort) connector.offExitAbort(handlers.onExitAbort);
-            if (handlers.onExitError) connector.offExitError(handlers.onExitError);
+            if (registered.onEvent) connector.offEvent(registered.onEvent);
+            if (registered.onOpen) connector.offOpen(registered.onOpen);
+            if (registered.onLoad) connector.offLoad(registered.onLoad);
+            if (registered.onExit) connector.offExit(registered.onExit);
+            if (registered.onExitSuccess) connector.offExitSuccess(registered.onExitSuccess);
+            if (registered.onExitAbort) connector.offExitAbort(registered.onExitAbort);
+            if (registered.onExitError) connector.offExitError(registered.onExitError);
         };
     }, [
         connector,
-        options?.onEvent,
+        stableOnEvent,
         handleOpen,
-        options?.onLoad,
+        stableOnLoad,
         handleExit,
-        options?.onExitSuccess,
-        options?.onExitAbort,
-        options?.onExitError
+        stableOnExitSuccess,
+        stableOnExitAbort,
+        stableOnExitError
     ]);
     // This is used to hide any potential race conditions from usage; allowing
     // interaction before the script may have loaded.

package/dist/{useQuilttInstitutions-12s-FLdw-CQZ.js → useQuilttInstitutions-12s-PJd2C3BF.js}

@@ -1,8 +1,8 @@
 'use client';
-import { useMemo, useState, useCallback, useEffect } from 'react';
+import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { InstitutionsAPI } from '@quiltt/core';
 import { useDebounce } from 'use-debounce';
-import { v as version } from './useQuilttConnector-12s-CL6uHdqe.js';
+import { v as version } from './useQuilttConnector-12s-BJljrsWT.js';
 import { u as useSession } from './useSession-12s-7GOn4sUn.js';
 
 const useQuilttInstitutions = (connectorId, onErrorCallback)=>{
@@ -27,6 +27,11 @@ const useQuilttInstitutions = (connectorId, onErrorCallback)=>{
     const [searchTerm] = useDebounce(searchTermInput, 350);
     const [searchResults, setSearchResults] = useState([]);
     const [isSearching, setIsSearching] = useState(false);
+    // Store callback in ref to maintain stable reference
+    const onErrorCallbackRef = useRef(onErrorCallback);
+    useEffect(()=>{
+        onErrorCallbackRef.current = onErrorCallback;
+    });
     /**
    * Start Search
    * This function is used to initiate a search for institutions based on the provided term with
@@ -43,10 +48,8 @@ const useQuilttInstitutions = (connectorId, onErrorCallback)=>{
     const handleError = useCallback((message)=>{
         const errorMessage = message || 'Unknown error occurred while searching institutions';
         console.error('Quiltt Institutions Search Error:', errorMessage);
-        if (onErrorCallback) onErrorCallback(errorMessage);
-    }, [
-        onErrorCallback
-    ]);
+        if (onErrorCallbackRef.current) onErrorCallbackRef.current(errorMessage);
+    }, []);
     /**
    * Run Search
    * This effect will run when the searchTerm changes and is at least 2 characters long.
@@ -66,7 +69,7 @@ const useQuilttInstitutions = (connectorId, onErrorCallback)=>{
             }
         }).catch((error)=>{
             if (!abortController.signal.aborted) {
-                handleError(error.message);
+                handleError(error?.message);
                 setIsSearching(false);
             }
         });

package/dist/{useQuilttSession-12s-CM6ALGSN.js → useQuilttSession-12s-CwVw-aOM.js}

@@ -1,7 +1,7 @@
 'use client';
 import { useCallback } from 'react';
 import { AuthAPI } from '@quiltt/core';
-import { u as useImportSession, a as useIdentifySession, b as useAuthenticateSession, c as useRevokeSession } from './QuilttAuthProvider-12s-BZuGySu0.js';
+import { u as useImportSession, a as useIdentifySession, b as useAuthenticateSession, c as useRevokeSession } from './QuilttAuthProvider-12s-D-Wr7LUT.js';
 import { u as useQuilttSettings } from './useQuilttSettings-12s--rCJoNHD.js';
 import { u as useSession } from './useSession-12s-7GOn4sUn.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react",
-  "version": "4.3.1",
+  "version": "4.3.2",
   "description": "React Components and Hooks for Quiltt Connector",
   "keywords": [
     "quiltt",
@@ -36,7 +36,7 @@
   "dependencies": {
     "@apollo/client": "^3.14.0",
     "use-debounce": "^10.0.4",
-    "@quiltt/core": "4.3.1"
+    "@quiltt/core": "4.3.2"
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.4",

package/src/components/QuilttButton.tsx

@@ -127,10 +127,12 @@ export const QuilttButton = <T extends ElementType = 'button'>({
     // 1. Pre-open validation
     // 2. Preventing opening via event.preventDefault()
     // 3. Setting up state before connector opens
-    if (onClick) onClick(event)
+    onClick?.(event)
 
-    // Then open the Quiltt connector
-    open()
+    // Only open if event wasn't prevented
+    if (!event.defaultPrevented) {
+      open()
+    }
   }
 
   // Generate key for forced remounting if enabled, but respect user-provided key

package/src/hooks/useQuilttConnector.ts

@@ -11,6 +11,7 @@ import { cdnBase } from '@quiltt/core'
 
 import { useQuilttSession } from '@/hooks/useQuilttSession'
 import { useScript } from '@/hooks/useScript'
+import { isDeepEqual } from '@/utils/isDeepEqual'
 import { version } from '@/version'
 
 declare const Quiltt: ConnectorSDK
@@ -33,11 +34,18 @@ export const useQuilttConnector = (
   // Keep track of the previous connectionId to detect changes
   const prevConnectionIdRef = useRef<string | undefined>(options?.connectionId)
   const prevConnectorIdRef = useRef<string | undefined>(connectorId)
+  const prevInstitutionRef = useRef<string | undefined>(options?.institution)
   const connectorCreatedRef = useRef<boolean>(false)
 
   // Track whether the connector is currently open
   const isConnectorOpenRef = useRef<boolean>(false)
 
+  // Store callbacks in refs to maintain stable references
+  const callbacksRef = useRef<ConnectorSDKConnectorOptions>(options || {})
+  useEffect(() => {
+    callbacksRef.current = options || {}
+  })
+
   // Set Session
   // biome-ignore lint/correctness/useExhaustiveDependencies: trigger effects when script status changes too
   useEffect(() => {
@@ -54,10 +62,15 @@ export const useQuilttConnector = (
     const currentConnectionId = options?.connectionId
     const currentInstitution = options?.institution
 
-    // Check for changes
+    // Check for changes - use deep equality for institution object
     const connectionIdChanged = prevConnectionIdRef.current !== currentConnectionId
     const connectorIdChanged = prevConnectorIdRef.current !== connectorId
-    const hasChanges = connectionIdChanged || connectorIdChanged || !connectorCreatedRef.current
+    const institutionChanged = !isDeepEqual(prevInstitutionRef.current, currentInstitution)
+    const hasChanges =
+      connectionIdChanged ||
+      connectorIdChanged ||
+      institutionChanged ||
+      !connectorCreatedRef.current
 
     // Update if there are changes, regardless of what the changes are
     if (hasChanges) {
@@ -73,66 +86,83 @@ export const useQuilttConnector = (
       connectorCreatedRef.current = true
       prevConnectionIdRef.current = currentConnectionId
       prevConnectorIdRef.current = connectorId
+      prevInstitutionRef.current = currentInstitution
     }
   }, [connectorId, options?.connectionId, options?.institution, status])
 
-  // Internal handlers to track connector state
-  const handleOpen = useCallback(
-    (metadata: any) => {
-      isConnectorOpenRef.current = true
-      options?.onOpen?.(metadata)
-    },
-    [options?.onOpen]
-  )
-
-  const handleExit = useCallback(
-    (type: any, metadata: any) => {
-      isConnectorOpenRef.current = false
-      options?.onExit?.(type, metadata)
-    },
-    [options?.onExit]
-  )
-
-  // Register event handlers
+  // Internal handlers to track connector state (stable references)
+  const handleOpen = useCallback((metadata: any) => {
+    isConnectorOpenRef.current = true
+    callbacksRef.current?.onOpen?.(metadata)
+  }, [])
+
+  const handleExit = useCallback((type: any, metadata: any) => {
+    isConnectorOpenRef.current = false
+    callbacksRef.current?.onExit?.(type, metadata)
+  }, [])
+
+  // Create stable wrapper functions for callbacks
+  const stableOnEvent = useCallback((type: any, metadata: any) => {
+    callbacksRef.current?.onEvent?.(type, metadata)
+  }, [])
+
+  const stableOnLoad = useCallback((metadata: any) => {
+    callbacksRef.current?.onLoad?.(metadata)
+  }, [])
+
+  const stableOnExitSuccess = useCallback((metadata: any) => {
+    callbacksRef.current?.onExitSuccess?.(metadata)
+  }, [])
+
+  const stableOnExitAbort = useCallback((metadata: any) => {
+    callbacksRef.current?.onExitAbort?.(metadata)
+  }, [])
+
+  const stableOnExitError = useCallback((metadata: any) => {
+    callbacksRef.current?.onExitError?.(metadata)
+  }, [])
+
+  // Register event handlers (only re-runs when connector changes)
   useEffect(() => {
     if (!connector) return
 
-    const handlers = {
-      onEvent: options?.onEvent,
-      onOpen: handleOpen,
-      onLoad: options?.onLoad,
-      onExit: handleExit,
-      onExitSuccess: options?.onExitSuccess,
-      onExitAbort: options?.onExitAbort,
-      onExitError: options?.onExitError,
+    // Capture which handlers we're registering to ensure proper cleanup
+    const registered = {
+      onEvent: callbacksRef.current?.onEvent ? stableOnEvent : null,
+      onOpen: callbacksRef.current?.onOpen ? handleOpen : null,
+      onLoad: callbacksRef.current?.onLoad ? stableOnLoad : null,
+      onExit: callbacksRef.current?.onExit ? handleExit : null,
+      onExitSuccess: callbacksRef.current?.onExitSuccess ? stableOnExitSuccess : null,
+      onExitAbort: callbacksRef.current?.onExitAbort ? stableOnExitAbort : null,
+      onExitError: callbacksRef.current?.onExitError ? stableOnExitError : null,
     }
 
-    if (handlers.onEvent) connector.onEvent(handlers.onEvent)
-    if (handlers.onOpen) connector.onOpen(handlers.onOpen)
-    if (handlers.onLoad) connector.onLoad(handlers.onLoad)
-    if (handlers.onExit) connector.onExit(handlers.onExit)
-    if (handlers.onExitSuccess) connector.onExitSuccess(handlers.onExitSuccess)
-    if (handlers.onExitAbort) connector.onExitAbort(handlers.onExitAbort)
-    if (handlers.onExitError) connector.onExitError(handlers.onExitError)
+    if (registered.onEvent) connector.onEvent(registered.onEvent)
+    if (registered.onOpen) connector.onOpen(registered.onOpen)
+    if (registered.onLoad) connector.onLoad(registered.onLoad)
+    if (registered.onExit) connector.onExit(registered.onExit)
+    if (registered.onExitSuccess) connector.onExitSuccess(registered.onExitSuccess)
+    if (registered.onExitAbort) connector.onExitAbort(registered.onExitAbort)
+    if (registered.onExitError) connector.onExitError(registered.onExitError)
 
     return () => {
-      if (handlers.onEvent) connector.offEvent(handlers.onEvent)
-      if (handlers.onOpen) connector.offOpen(handlers.onOpen)
-      if (handlers.onLoad) connector.offLoad(handlers.onLoad)
-      if (handlers.onExit) connector.offExit(handlers.onExit)
-      if (handlers.onExitSuccess) connector.offExitSuccess(handlers.onExitSuccess)
-      if (handlers.onExitAbort) connector.offExitAbort(handlers.onExitAbort)
-      if (handlers.onExitError) connector.offExitError(handlers.onExitError)
+      if (registered.onEvent) connector.offEvent(registered.onEvent)
+      if (registered.onOpen) connector.offOpen(registered.onOpen)
+      if (registered.onLoad) connector.offLoad(registered.onLoad)
+      if (registered.onExit) connector.offExit(registered.onExit)
+      if (registered.onExitSuccess) connector.offExitSuccess(registered.onExitSuccess)
+      if (registered.onExitAbort) connector.offExitAbort(registered.onExitAbort)
+      if (registered.onExitError) connector.offExitError(registered.onExitError)
     }
   }, [
     connector,
-    options?.onEvent,
+    stableOnEvent,
     handleOpen,
-    options?.onLoad,
+    stableOnLoad,
     handleExit,
-    options?.onExitSuccess,
-    options?.onExitAbort,
-    options?.onExitError,
+    stableOnExitSuccess,
+    stableOnExitAbort,
+    stableOnExitError,
   ])
 
   // This is used to hide any potential race conditions from usage; allowing

package/src/hooks/useQuilttInstitutions.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import type { ErrorData, InstitutionsData } from '@quiltt/core'
 import { InstitutionsAPI } from '@quiltt/core'
@@ -53,6 +53,12 @@ export const useQuilttInstitutions: UseQuilttInstitutions = (connectorId, onErro
 
   const [isSearching, setIsSearching] = useState(false)
 
+  // Store callback in ref to maintain stable reference
+  const onErrorCallbackRef = useRef(onErrorCallback)
+  useEffect(() => {
+    onErrorCallbackRef.current = onErrorCallback
+  })
+
   /**
    * Start Search
    * This function is used to initiate a search for institutions based on the provided term with
@@ -69,15 +75,12 @@ export const useQuilttInstitutions: UseQuilttInstitutions = (connectorId, onErro
     setSearchTermInput(term)
   }, [])
 
-  const handleError = useCallback(
-    (message: string) => {
-      const errorMessage = message || 'Unknown error occurred while searching institutions'
+  const handleError = useCallback((message: string) => {
+    const errorMessage = message || 'Unknown error occurred while searching institutions'
 
-      console.error('Quiltt Institutions Search Error:', errorMessage)
-      if (onErrorCallback) onErrorCallback(errorMessage)
-    },
-    [onErrorCallback]
-  )
+    console.error('Quiltt Institutions Search Error:', errorMessage)
+    if (onErrorCallbackRef.current) onErrorCallbackRef.current(errorMessage)
+  }, [])
 
   /**
    * Run Search
@@ -104,7 +107,7 @@ export const useQuilttInstitutions: UseQuilttInstitutions = (connectorId, onErro
       })
       .catch((error) => {
         if (!abortController.signal.aborted) {
-          handleError(error.message)
+          handleError(error?.message)
           setIsSearching(false)
         }
       })

package/src/providers/QuilttAuthProvider.tsx

@@ -29,6 +29,7 @@ export const QuilttAuthProvider: FC<QuilttAuthProviderProps> = ({
 }) => {
   const { session, importSession } = useQuilttSession()
   const previousSessionRef = useRef(session)
+  const previousTokenRef = useRef<string | undefined>()
 
   // Memoize the client to avoid unnecessary re-renders
   const apolloClient = useMemo(
@@ -40,9 +41,15 @@ export const QuilttAuthProvider: FC<QuilttAuthProviderProps> = ({
     [graphqlClient]
   )
 
-  // Import passed in token
+  // Import passed in token (only if value has changed)
   useEffect(() => {
-    if (token) importSession(token)
+    if (token && token !== previousTokenRef.current) {
+      importSession(token)
+      previousTokenRef.current = token
+    } else if (!token) {
+      // Reset ref when token becomes undefined to allow re-import of same token later
+      previousTokenRef.current = undefined
+    }
   }, [token, importSession])
 
   // Reset Client Store when session changes (using deep comparison)

package/src/utils/isDeepEqual.ts

@@ -31,8 +31,9 @@ export const isDeepEqual = (obj1: unknown, obj2: unknown): boolean => {
   }
   if (obj1 instanceof Set && obj2 instanceof Set) {
     if (obj1.size !== obj2.size) return false
+    const arr2 = Array.from(obj2)
     for (const item of obj1) {
-      if (!Array.from(obj2).some((value) => isDeepEqual(item, value))) return false
+      if (!arr2.some((value) => isDeepEqual(item, value))) return false
     }
     return true
   }