@stytch/react 15.0.0 → 17.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @stytch/react
 
+## 17.0.0
+
+### Major Changes
+
+- a0fbe9f: Update minimum peer dependency on `@stytch/vanilla-js` to `^4.9.0`
+
+### Patch Changes
+
+- Updated dependencies [a0fbe9f]
+- Updated dependencies [a0fbe9f]
+  - @stytch/vanilla-js@4.9.0
+
+## 16.0.0
+
+### Patch Changes
+
+- Updated dependencies [f604dcb]
+  - @stytch/vanilla-js@4.7.0
+
 ## 15.0.0
 
 ### Minor Changes

package/dist/b2b/index.d.ts

@@ -11,7 +11,7 @@ import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
 type StytchB2BClient = StytchB2BHeadlessClient | StytchB2BUIClient;
 type SWRMember = {
     /**
-     * Either the active {@link Member} object, or null if the user is not logged in.
+     * Either the active {@link Member} object, or null if the member is not logged in.
      */
     member: Member | null;
     /**
@@ -21,7 +21,7 @@ type SWRMember = {
 };
 type SWRMemberSession = {
     /**
-     * Either the active {@link MemberSession} object, or null if the user is not logged in.
+     * Either the active {@link MemberSession} object, or null if the member is not logged in.
      */
     session: MemberSession | null;
     /**
@@ -31,7 +31,7 @@ type SWRMemberSession = {
 };
 type SWROrganization = {
     /**
-     * Either the active {@link Organization} object, or null if the user is not logged in.
+     * Either the active {@link Organization} object, or null if the member is not logged in.
      */
     organization: Organization | null;
     /**

package/dist/b2b/index.esm.d.ts

@@ -11,7 +11,7 @@ import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
 type StytchB2BClient = StytchB2BHeadlessClient | StytchB2BUIClient;
 type SWRMember = {
     /**
-     * Either the active {@link Member} object, or null if the user is not logged in.
+     * Either the active {@link Member} object, or null if the member is not logged in.
      */
     member: Member | null;
     /**
@@ -21,7 +21,7 @@ type SWRMember = {
 };
 type SWRMemberSession = {
     /**
-     * Either the active {@link MemberSession} object, or null if the user is not logged in.
+     * Either the active {@link MemberSession} object, or null if the member is not logged in.
      */
     session: MemberSession | null;
     /**
@@ -31,7 +31,7 @@ type SWRMemberSession = {
 };
 type SWROrganization = {
     /**
-     * Either the active {@link Organization} object, or null if the user is not logged in.
+     * Either the active {@link Organization} object, or null if the member is not logged in.
      */
     organization: Organization | null;
     /**

package/dist/b2b/index.esm.js

@@ -1,5 +1,56 @@
 import React, { useRef, useState, useEffect, useCallback, createContext, useContext, useMemo, useLayoutEffect } from 'react';
 
+const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
+    // If comparing functions, this may need some work. Not sure the
+    // best path for this: compare instance (what it currently does),
+    // stringify and compare, etc.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const deepEqual = (a, b) => {
+        // Ensures type is the same
+        if (typeof a !== typeof b)
+            return false;
+        // arrays, null, and objects all have type 'object'
+        if (a === null || b === null)
+            return a === b;
+        if (typeof a === 'object') {
+            if (Object.keys(a).length !== Object.keys(b).length || Object.keys(a).some((k) => !(k in b)))
+                return false;
+            return Object.entries(a)
+                .filter(([k]) => !KEYS_TO_EXCLUDE.includes(k))
+                .every(([k, v]) => deepEqual(v, b[k]));
+        }
+        // boolean, string, number, undefined
+        return a === b;
+    };
+    return deepEqual;
+};
+
+const deepEqual = createDeepEqual();
+/**
+ * Returns a version of `newValue` whose properties that are deeply equal to
+ * those in `oldValue` are replaced with those from `oldValue`. This provides a
+ * limited form of "structural sharing" that provides a stable reference for
+ * unchanged slices of the object.
+ *
+ * If `oldValue` and `newValue` are referentially equal, the same value is
+ * returned.
+ *
+ * @param oldValue The old value
+ * @param newValue The new value
+ */
+const mergeWithStableProps = (oldValue, newValue) => {
+    // If the values are already referentially the same, just return the new value
+    if (oldValue === newValue) {
+        return newValue;
+    }
+    return Object.keys(oldValue).reduce((acc, key) => {
+        if (key in newValue && deepEqual(oldValue[key], newValue[key])) {
+            acc[key] = oldValue[key];
+        }
+        return acc;
+    }, Object.assign({}, newValue));
+};
+
 const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
 const B2BProviderMustBeUniqueError = 'You cannot render a <StytchB2BProvider> inside another <StytchB2BProvider>.';
 const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
@@ -116,7 +167,7 @@ const useStytchIsAuthorized = (resourceId, action) => {
             fromCache: false,
             isAuthorized,
         }));
-    }, [client, session === null || session === void 0 ? void 0 : session.roles, resourceId, action]);
+    }, [client, session === null || session === void 0 ? void 0 : session.roles, resourceId, action, setIsAuthorized]);
     return isAuthorized;
 };
 /**
@@ -199,7 +250,7 @@ const withStytchPermissions = (Component) => {
             client.rbac
                 .allPermissions()
                 .then((permissions) => setPermissions({ loaded: true, value: permissions }));
-        }, [client, session === null || session === void 0 ? void 0 : session.roles]);
+        }, [client, session === null || session === void 0 ? void 0 : session.roles, setPermissions]);
         if (!permissions.loaded) {
             return null;
         }
@@ -225,46 +276,25 @@ const StytchB2BProvider = ({ stytch, children }) => {
     invariant(!useIsMounted__INTERNAL(), B2BProviderMustBeUniqueError);
     invariant(typeof window !== 'undefined', noSSRError);
     const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [member, setMember] = useAsyncState({
-        member: stytch.self.getSync(),
-        fromCache: true,
-    });
-    const [session, setMemberSession] = useAsyncState({
-        session: stytch.session.getSync(),
-        fromCache: true,
-    });
-    const [organization, setOrganization] = useAsyncState({
-        organization: stytch.organization.getSync(),
-        fromCache: true,
+    const [{ member, session, organization }, setClientState] = useAsyncState({
+        session: stytch.session.getInfo(),
+        member: stytch.self.getInfo(),
+        organization: stytch.organization.getInfo(),
     });
-    useEffect(() => {
-        const unsubscribeMember = stytch.self.onChange((member) => setMember({
-            member,
-            fromCache: false,
-        }));
-        const unsubscribeSession = stytch.session.onChange((session) => setMemberSession({
-            session,
-            fromCache: false,
-        }));
-        const unsubscribeOrganization = stytch.organization.onChange((organization) => setOrganization({
-            organization,
-            fromCache: false,
-        }));
-        return () => {
-            unsubscribeMember();
-            unsubscribeSession();
-            unsubscribeOrganization();
-        };
-    }, [stytch, setMember, setMemberSession, setOrganization]);
-    // TODO (SDK-813): Remove this when we have a single top-level onChange handler
-    const allValuesReady = !!member.member === !!session.session && !!session.session === !!organization.organization;
-    const finalValues = allValuesReady
-        ? { member, session, organization }
-        : { member: initialMember, session: initialMemberSession, organization: initialOrganization };
+    useEffect(() => stytch.onStateChange(() => {
+        setClientState((oldState) => {
+            const newState = {
+                session: stytch.session.getInfo(),
+                member: stytch.self.getInfo(),
+                organization: stytch.organization.getInfo(),
+            };
+            return mergeWithStableProps(oldState, newState);
+        });
+    }), [setClientState, stytch]);
     return (React.createElement(StytchB2BContext.Provider, { value: ctx },
-        React.createElement(StytchOrganizationContext.Provider, { value: finalValues.organization },
-            React.createElement(StytchMemberContext.Provider, { value: finalValues.member },
-                React.createElement(StytchMemberSessionContext.Provider, { value: finalValues.session }, children)))));
+        React.createElement(StytchOrganizationContext.Provider, { value: organization },
+            React.createElement(StytchMemberContext.Provider, { value: member },
+                React.createElement(StytchMemberSessionContext.Provider, { value: session }, children)))));
 };
 
 /**
@@ -322,6 +352,7 @@ const StytchB2B = ({ styles, callbacks, config }) => {
             elementId: `#${containerEl.current.id}`,
             styles,
         });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- SDK-1354
     }, [stytchClient, styles, callbacks]);
     return React.createElement("div", { ref: containerEl });
 };

package/dist/b2b/index.js

@@ -8,6 +8,57 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
+    // If comparing functions, this may need some work. Not sure the
+    // best path for this: compare instance (what it currently does),
+    // stringify and compare, etc.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const deepEqual = (a, b) => {
+        // Ensures type is the same
+        if (typeof a !== typeof b)
+            return false;
+        // arrays, null, and objects all have type 'object'
+        if (a === null || b === null)
+            return a === b;
+        if (typeof a === 'object') {
+            if (Object.keys(a).length !== Object.keys(b).length || Object.keys(a).some((k) => !(k in b)))
+                return false;
+            return Object.entries(a)
+                .filter(([k]) => !KEYS_TO_EXCLUDE.includes(k))
+                .every(([k, v]) => deepEqual(v, b[k]));
+        }
+        // boolean, string, number, undefined
+        return a === b;
+    };
+    return deepEqual;
+};
+
+const deepEqual = createDeepEqual();
+/**
+ * Returns a version of `newValue` whose properties that are deeply equal to
+ * those in `oldValue` are replaced with those from `oldValue`. This provides a
+ * limited form of "structural sharing" that provides a stable reference for
+ * unchanged slices of the object.
+ *
+ * If `oldValue` and `newValue` are referentially equal, the same value is
+ * returned.
+ *
+ * @param oldValue The old value
+ * @param newValue The new value
+ */
+const mergeWithStableProps = (oldValue, newValue) => {
+    // If the values are already referentially the same, just return the new value
+    if (oldValue === newValue) {
+        return newValue;
+    }
+    return Object.keys(oldValue).reduce((acc, key) => {
+        if (key in newValue && deepEqual(oldValue[key], newValue[key])) {
+            acc[key] = oldValue[key];
+        }
+        return acc;
+    }, Object.assign({}, newValue));
+};
+
 const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
 const B2BProviderMustBeUniqueError = 'You cannot render a <StytchB2BProvider> inside another <StytchB2BProvider>.';
 const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
@@ -124,7 +175,7 @@ const useStytchIsAuthorized = (resourceId, action) => {
             fromCache: false,
             isAuthorized,
         }));
-    }, [client, session === null || session === void 0 ? void 0 : session.roles, resourceId, action]);
+    }, [client, session === null || session === void 0 ? void 0 : session.roles, resourceId, action, setIsAuthorized]);
     return isAuthorized;
 };
 /**
@@ -207,7 +258,7 @@ const withStytchPermissions = (Component) => {
             client.rbac
                 .allPermissions()
                 .then((permissions) => setPermissions({ loaded: true, value: permissions }));
-        }, [client, session === null || session === void 0 ? void 0 : session.roles]);
+        }, [client, session === null || session === void 0 ? void 0 : session.roles, setPermissions]);
         if (!permissions.loaded) {
             return null;
         }
@@ -233,46 +284,25 @@ const StytchB2BProvider = ({ stytch, children }) => {
     invariant(!useIsMounted__INTERNAL(), B2BProviderMustBeUniqueError);
     invariant(typeof window !== 'undefined', noSSRError);
     const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [member, setMember] = useAsyncState({
-        member: stytch.self.getSync(),
-        fromCache: true,
-    });
-    const [session, setMemberSession] = useAsyncState({
-        session: stytch.session.getSync(),
-        fromCache: true,
-    });
-    const [organization, setOrganization] = useAsyncState({
-        organization: stytch.organization.getSync(),
-        fromCache: true,
+    const [{ member, session, organization }, setClientState] = useAsyncState({
+        session: stytch.session.getInfo(),
+        member: stytch.self.getInfo(),
+        organization: stytch.organization.getInfo(),
     });
-    React.useEffect(() => {
-        const unsubscribeMember = stytch.self.onChange((member) => setMember({
-            member,
-            fromCache: false,
-        }));
-        const unsubscribeSession = stytch.session.onChange((session) => setMemberSession({
-            session,
-            fromCache: false,
-        }));
-        const unsubscribeOrganization = stytch.organization.onChange((organization) => setOrganization({
-            organization,
-            fromCache: false,
-        }));
-        return () => {
-            unsubscribeMember();
-            unsubscribeSession();
-            unsubscribeOrganization();
-        };
-    }, [stytch, setMember, setMemberSession, setOrganization]);
-    // TODO (SDK-813): Remove this when we have a single top-level onChange handler
-    const allValuesReady = !!member.member === !!session.session && !!session.session === !!organization.organization;
-    const finalValues = allValuesReady
-        ? { member, session, organization }
-        : { member: initialMember, session: initialMemberSession, organization: initialOrganization };
+    React.useEffect(() => stytch.onStateChange(() => {
+        setClientState((oldState) => {
+            const newState = {
+                session: stytch.session.getInfo(),
+                member: stytch.self.getInfo(),
+                organization: stytch.organization.getInfo(),
+            };
+            return mergeWithStableProps(oldState, newState);
+        });
+    }), [setClientState, stytch]);
     return (React__default['default'].createElement(StytchB2BContext.Provider, { value: ctx },
-        React__default['default'].createElement(StytchOrganizationContext.Provider, { value: finalValues.organization },
-            React__default['default'].createElement(StytchMemberContext.Provider, { value: finalValues.member },
-                React__default['default'].createElement(StytchMemberSessionContext.Provider, { value: finalValues.session }, children)))));
+        React__default['default'].createElement(StytchOrganizationContext.Provider, { value: organization },
+            React__default['default'].createElement(StytchMemberContext.Provider, { value: member },
+                React__default['default'].createElement(StytchMemberSessionContext.Provider, { value: session }, children)))));
 };
 
 /**
@@ -330,6 +360,7 @@ const StytchB2B = ({ styles, callbacks, config }) => {
             elementId: `#${containerEl.current.id}`,
             styles,
         });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- SDK-1354
     }, [stytchClient, styles, callbacks]);
     return React__default['default'].createElement("div", { ref: containerEl });
 };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import React from "react";
 import { ReactNode } from "react";
 // We need to import the StytchUIClient type to give the TSDoc parser a hint as to where it is from
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Callbacks, StytchLoginConfig, StyleConfig, User, Session, StytchUIClient } from "@stytch/vanilla-js";
+import { Callbacks, StytchLoginConfig, StyleConfig, Session, StytchUIClient, User } from "@stytch/vanilla-js";
 import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
 interface StytchProps {
     /**

package/dist/index.esm.d.ts

@@ -3,7 +3,7 @@ import React from "react";
 import { ReactNode } from "react";
 // We need to import the StytchUIClient type to give the TSDoc parser a hint as to where it is from
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Callbacks, StytchLoginConfig, StyleConfig, User, Session, StytchUIClient } from "@stytch/vanilla-js";
+import { Callbacks, StytchLoginConfig, StyleConfig, Session, StytchUIClient, User } from "@stytch/vanilla-js";
 import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
 interface StytchProps {
     /**

package/dist/index.esm.js

@@ -1,20 +1,55 @@
 import React, { useRef, useState, useEffect, useCallback, createContext, useContext, useMemo, useLayoutEffect } from 'react';
 
-const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
-const providerMustBeUniqueError = 'You cannot render a <StytchProvider> inside another <StytchProvider>.';
-const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
-Use the @stytch/nextjs library instead - 
-npm remove @stytch/react && npm install @stytch/nextjs
-`;
-const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
-You must use the UI SDK to use UI elements.
-Please make sure you are importing from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.`;
+const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
+    // If comparing functions, this may need some work. Not sure the
+    // best path for this: compare instance (what it currently does),
+    // stringify and compare, etc.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const deepEqual = (a, b) => {
+        // Ensures type is the same
+        if (typeof a !== typeof b)
+            return false;
+        // arrays, null, and objects all have type 'object'
+        if (a === null || b === null)
+            return a === b;
+        if (typeof a === 'object') {
+            if (Object.keys(a).length !== Object.keys(b).length || Object.keys(a).some((k) => !(k in b)))
+                return false;
+            return Object.entries(a)
+                .filter(([k]) => !KEYS_TO_EXCLUDE.includes(k))
+                .every(([k, v]) => deepEqual(v, b[k]));
+        }
+        // boolean, string, number, undefined
+        return a === b;
+    };
+    return deepEqual;
+};
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function invariant(cond, message) {
-    if (!cond)
-        throw new Error(message);
-}
+const deepEqual = createDeepEqual();
+/**
+ * Returns a version of `newValue` whose properties that are deeply equal to
+ * those in `oldValue` are replaced with those from `oldValue`. This provides a
+ * limited form of "structural sharing" that provides a stable reference for
+ * unchanged slices of the object.
+ *
+ * If `oldValue` and `newValue` are referentially equal, the same value is
+ * returned.
+ *
+ * @param oldValue The old value
+ * @param newValue The new value
+ */
+const mergeWithStableProps = (oldValue, newValue) => {
+    // If the values are already referentially the same, just return the new value
+    if (oldValue === newValue) {
+        return newValue;
+    }
+    return Object.keys(oldValue).reduce((acc, key) => {
+        if (key in newValue && deepEqual(oldValue[key], newValue[key])) {
+            acc[key] = oldValue[key];
+        }
+        return acc;
+    }, Object.assign({}, newValue));
+};
 
 // useState can cause memory leaks if it is set after the component unmounted. For example, if it is
 // set after `await`, or in a `then`, `catch`, or `finally`, or in a setTimout/setInterval.
@@ -33,6 +68,22 @@ const useAsyncState = (initialState) => {
     return [state, setStateAction];
 };
 
+const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
+const providerMustBeUniqueError = 'You cannot render a <StytchProvider> inside another <StytchProvider>.';
+const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
+Use the @stytch/nextjs library instead - 
+npm remove @stytch/react && npm install @stytch/nextjs
+`;
+const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
+You must use the UI SDK to use UI elements.
+Please make sure you are importing from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function invariant(cond, message) {
+    if (!cond)
+        throw new Error(message);
+}
+
 const initialUser = {
     user: null,
     fromCache: false,
@@ -132,34 +183,22 @@ const StytchProvider = ({ stytch, children }) => {
     invariant(!useIsMounted__INTERNAL(), providerMustBeUniqueError);
     invariant(typeof window !== 'undefined', noSSRError);
     const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [user, setUser] = useAsyncState({
-        user: stytch.user.getSync(),
-        fromCache: true,
+    const [{ user, session }, setClientState] = useAsyncState({
+        session: stytch.session.getInfo(),
+        user: stytch.user.getInfo(),
     });
-    const [session, setSession] = useAsyncState({
-        session: stytch.session.getSync(),
-        fromCache: true,
-    });
-    useEffect(() => {
-        const unsubscribeUser = stytch.user.onChange((user) => setUser({
-            user,
-            fromCache: false,
-        }));
-        const unsubscribeSession = stytch.session.onChange((session) => setSession({
-            session,
-            fromCache: false,
-        }));
-        return () => {
-            unsubscribeUser();
-            unsubscribeSession();
-        };
-    }, [stytch, setUser, setSession]);
-    // TODO (SDK-813): Remove this when we have a single top-level onChange handler
-    const finalSess = !!session.session === !!user.user ? session : initialSession;
-    const finalUser = !!session.session === !!user.user ? user : initialUser;
+    useEffect(() => stytch.onStateChange(() => {
+        setClientState((oldState) => {
+            const newState = {
+                session: stytch.session.getInfo(),
+                user: stytch.user.getInfo(),
+            };
+            return mergeWithStableProps(oldState, newState);
+        });
+    }), [setClientState, stytch]);
     return (React.createElement(StytchContext.Provider, { value: ctx },
-        React.createElement(StytchUserContext.Provider, { value: finalUser },
-            React.createElement(StytchSessionContext.Provider, { value: finalSess }, children))));
+        React.createElement(StytchUserContext.Provider, { value: user },
+            React.createElement(StytchSessionContext.Provider, { value: session }, children))));
 };
 
 /**

package/dist/index.js

@@ -8,21 +8,56 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
-const providerMustBeUniqueError = 'You cannot render a <StytchProvider> inside another <StytchProvider>.';
-const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
-Use the @stytch/nextjs library instead - 
-npm remove @stytch/react && npm install @stytch/nextjs
-`;
-const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
-You must use the UI SDK to use UI elements.
-Please make sure you are importing from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.`;
+const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
+    // If comparing functions, this may need some work. Not sure the
+    // best path for this: compare instance (what it currently does),
+    // stringify and compare, etc.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const deepEqual = (a, b) => {
+        // Ensures type is the same
+        if (typeof a !== typeof b)
+            return false;
+        // arrays, null, and objects all have type 'object'
+        if (a === null || b === null)
+            return a === b;
+        if (typeof a === 'object') {
+            if (Object.keys(a).length !== Object.keys(b).length || Object.keys(a).some((k) => !(k in b)))
+                return false;
+            return Object.entries(a)
+                .filter(([k]) => !KEYS_TO_EXCLUDE.includes(k))
+                .every(([k, v]) => deepEqual(v, b[k]));
+        }
+        // boolean, string, number, undefined
+        return a === b;
+    };
+    return deepEqual;
+};
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function invariant(cond, message) {
-    if (!cond)
-        throw new Error(message);
-}
+const deepEqual = createDeepEqual();
+/**
+ * Returns a version of `newValue` whose properties that are deeply equal to
+ * those in `oldValue` are replaced with those from `oldValue`. This provides a
+ * limited form of "structural sharing" that provides a stable reference for
+ * unchanged slices of the object.
+ *
+ * If `oldValue` and `newValue` are referentially equal, the same value is
+ * returned.
+ *
+ * @param oldValue The old value
+ * @param newValue The new value
+ */
+const mergeWithStableProps = (oldValue, newValue) => {
+    // If the values are already referentially the same, just return the new value
+    if (oldValue === newValue) {
+        return newValue;
+    }
+    return Object.keys(oldValue).reduce((acc, key) => {
+        if (key in newValue && deepEqual(oldValue[key], newValue[key])) {
+            acc[key] = oldValue[key];
+        }
+        return acc;
+    }, Object.assign({}, newValue));
+};
 
 // useState can cause memory leaks if it is set after the component unmounted. For example, if it is
 // set after `await`, or in a `then`, `catch`, or `finally`, or in a setTimout/setInterval.
@@ -41,6 +76,22 @@ const useAsyncState = (initialState) => {
     return [state, setStateAction];
 };
 
+const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
+const providerMustBeUniqueError = 'You cannot render a <StytchProvider> inside another <StytchProvider>.';
+const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
+Use the @stytch/nextjs library instead - 
+npm remove @stytch/react && npm install @stytch/nextjs
+`;
+const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
+You must use the UI SDK to use UI elements.
+Please make sure you are importing from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function invariant(cond, message) {
+    if (!cond)
+        throw new Error(message);
+}
+
 const initialUser = {
     user: null,
     fromCache: false,
@@ -140,34 +191,22 @@ const StytchProvider = ({ stytch, children }) => {
     invariant(!useIsMounted__INTERNAL(), providerMustBeUniqueError);
     invariant(typeof window !== 'undefined', noSSRError);
     const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [user, setUser] = useAsyncState({
-        user: stytch.user.getSync(),
-        fromCache: true,
+    const [{ user, session }, setClientState] = useAsyncState({
+        session: stytch.session.getInfo(),
+        user: stytch.user.getInfo(),
     });
-    const [session, setSession] = useAsyncState({
-        session: stytch.session.getSync(),
-        fromCache: true,
-    });
-    React.useEffect(() => {
-        const unsubscribeUser = stytch.user.onChange((user) => setUser({
-            user,
-            fromCache: false,
-        }));
-        const unsubscribeSession = stytch.session.onChange((session) => setSession({
-            session,
-            fromCache: false,
-        }));
-        return () => {
-            unsubscribeUser();
-            unsubscribeSession();
-        };
-    }, [stytch, setUser, setSession]);
-    // TODO (SDK-813): Remove this when we have a single top-level onChange handler
-    const finalSess = !!session.session === !!user.user ? session : initialSession;
-    const finalUser = !!session.session === !!user.user ? user : initialUser;
+    React.useEffect(() => stytch.onStateChange(() => {
+        setClientState((oldState) => {
+            const newState = {
+                session: stytch.session.getInfo(),
+                user: stytch.user.getInfo(),
+            };
+            return mergeWithStableProps(oldState, newState);
+        });
+    }), [setClientState, stytch]);
     return (React__default['default'].createElement(StytchContext.Provider, { value: ctx },
-        React__default['default'].createElement(StytchUserContext.Provider, { value: finalUser },
-            React__default['default'].createElement(StytchSessionContext.Provider, { value: finalSess }, children))));
+        React__default['default'].createElement(StytchUserContext.Provider, { value: user },
+            React__default['default'].createElement(StytchSessionContext.Provider, { value: session }, children))));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/react",
-  "version": "15.0.0",
+  "version": "17.0.0",
   "description": "Stytch's official React Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -33,15 +33,19 @@
   ],
   "devDependencies": {
     "@babel/runtime": "7.18.6",
-    "@stytch/vanilla-js": "4.2.0",
+    "@stytch/js-utils": "0.0.0",
+    "@stytch/vanilla-js": "4.9.0",
     "@testing-library/react": "14.0.0",
     "eslint-config-custom": "0.0.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-test-renderer": "18.0.0",
     "rollup": "2.56.3",
-    "typescript": "4.7.4"
+    "type-fest": "4.15.0",
+    "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@stytch/vanilla-js": "^4.2.0",
+    "@stytch/vanilla-js": "^4.9.0",
     "react": ">= 17.0.2",
     "react-dom": ">= 17.0.2"
   }