feat: skip unnecessary updates in SessionAuth (#831)

* feat: skip unnecessary updates in SessionAuth

* chore: update version

* chore: update size limit

Author: porcellus

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+## [0.42.3] - 2024-07-19
+
+### Changes
+
+-   Now we only update the session context if the object changes by value. This optimization should help reduce unnecessary re-renders.
+
 ## [0.42.2] - 2024-05-29
 
 ### Changes

examples/for-tests-react-16/src/App.js

@@ -418,6 +418,14 @@ export const DashboardNoAuthRequired = doNotUseReactRouterDom
 export function DashboardNoAuthRequiredHelper(props) {
     let sessionContext = useSessionContext();
 
+    useEffect(() => {
+        if (testContext.signoutOnSessionNotExists) {
+            if (!sessionContext.loading && !sessionContext.doesSessionExist) {
+                Session.signOut();
+            }
+        }
+    }, [sessionContext]);
+
     if (sessionContext.loading) {
         return null;
     }

examples/for-tests-react-16/src/testContext.js

@@ -21,6 +21,7 @@ export function getTestContext() {
                 : undefined,
         enableMFA: localStorage.getItem("enableMFA") === "true",
         defaultToEmail: localStorage.getItem("defaultToEmail") !== "false",
+        signoutOnSessionNotExists: localStorage.getItem("signoutOnSessionNotExists") === "true",
         disableRedirectionAfterSuccessfulSignInUp:
             localStorage.getItem("disableRedirectionAfterSuccessfulSignInUp") === "true",
     };

examples/for-tests/src/App.js

@@ -590,6 +590,14 @@ export const DashboardNoAuthRequired = doNotUseReactRouterDom
 export function DashboardNoAuthRequiredHelper(props) {
     let sessionContext = useSessionContext();
 
+    useEffect(() => {
+        if (testContext.signoutOnSessionNotExists) {
+            if (!sessionContext.loading && !sessionContext.doesSessionExist) {
+                Session.signOut();
+            }
+        }
+    }, [sessionContext]);
+
     if (sessionContext.loading) {
         return null;
     }

examples/for-tests/src/testContext.js

@@ -22,6 +22,7 @@ export function getTestContext() {
         },
         enableMFA: localStorage.getItem("enableMFA") === "true",
         defaultToEmail: localStorage.getItem("defaultToEmail") !== "false",
+        signoutOnSessionNotExists: localStorage.getItem("signoutOnSessionNotExists") === "true",
         disableRedirectionAfterSuccessfulSignInUp:
             localStorage.getItem("disableRedirectionAfterSuccessfulSignInUp") === "true",
     };

lib/build/genericComponentOverrideContext.js

@@ -68,6 +68,22 @@ const SessionAuth: React.FC<PropsWithChildren<SessionAuthProps>> = ({ children,
     // Reusing the parent context was removed because it caused a redirect loop in an edge case
     // because it'd also reuse the invalid claims part until it loaded.
     const [context, setContext] = useState<SessionContextType>({ loading: true });
+    const setContextIfChanged = useCallback(
+        (newValue: SessionContextType) => {
+            setContext((oldValue) => {
+                // We can't do this check before re-validation because there are be validators that depend on the current time
+                // Since the context is constructed by the same functions the property order should be stable, meaning that
+                // a simple JSON string check should be sufficient.
+                // Plus since this is just an optimization it is fine to have false positives,
+                // and this method won't have false negatives (where we'd miss an update).
+                if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) {
+                    return newValue;
+                }
+                return oldValue;
+            });
+        },
+        [setContext]
+    );
 
     const session = useRef<Session>();
 
@@ -191,7 +207,7 @@ const SessionAuth: React.FC<PropsWithChildren<SessionAuthProps>> = ({ children,
 
                         if (failureRedirectInfo.redirectPath !== undefined) {
                             if (validateAndCompareOnFailureRedirectionURLToCurrent(failureRedirectInfo.redirectPath)) {
-                                setContext(toSetContext);
+                                setContextIfChanged(toSetContext);
                                 return;
                             } else {
                                 return await SuperTokens.getInstanceOrThrow().redirectToUrl(
@@ -209,15 +225,15 @@ const SessionAuth: React.FC<PropsWithChildren<SessionAuthProps>> = ({ children,
                             message: "Showing access denied screen because a claim validator failed",
                             claimValidationError: failureRedirectInfo.failedClaim,
                         });
-                        return setContext({
+                        return setContextIfChanged({
                             ...toSetContext,
                             accessDeniedValidatorError: failureRedirectInfo.failedClaim,
                         });
                     }
                 }
             }
 
-            setContext(toSetContext);
+            setContextIfChanged(toSetContext);
         },
         [
             context.loading,
@@ -262,7 +278,7 @@ const SessionAuth: React.FC<PropsWithChildren<SessionAuthProps>> = ({ children,
                                 if (
                                     validateAndCompareOnFailureRedirectionURLToCurrent(failureRedirectInfo.redirectPath)
                                 ) {
-                                    setContext({ ...event.sessionContext, loading: false, invalidClaims });
+                                    setContextIfChanged({ ...event.sessionContext, loading: false, invalidClaims });
                                 } else {
                                     return await SuperTokens.getInstanceOrThrow().redirectToUrl(
                                         failureRedirectInfo.redirectPath,
@@ -279,23 +295,23 @@ const SessionAuth: React.FC<PropsWithChildren<SessionAuthProps>> = ({ children,
                                 message: "Showing access denied screen because a claim validator failed",
                                 claimValidationError: failureRedirectInfo.failedClaim,
                             });
-                            return setContext({
+                            return setContextIfChanged({
                                 ...event.sessionContext,
                                 loading: false,
                                 invalidClaims,
                                 accessDeniedValidatorError: failureRedirectInfo.failedClaim,
                             });
                         }
                     }
-                    setContext({ ...event.sessionContext, loading: false, invalidClaims });
+                    setContextIfChanged({ ...event.sessionContext, loading: false, invalidClaims });
 
                     return;
                 }
                 case "SIGN_OUT":
-                    setContext({ ...event.sessionContext, loading: false, invalidClaims: [] });
+                    setContextIfChanged({ ...event.sessionContext, loading: false, invalidClaims: [] });
                     return;
                 case "UNAUTHORISED":
-                    setContext({ ...event.sessionContext, loading: false, invalidClaims: [] });
+                    setContextIfChanged({ ...event.sessionContext, loading: false, invalidClaims: [] });
                     if (props.onSessionExpired !== undefined) {
                         props.onSessionExpired();
                     } else if (props.requireAuth !== false && props.doRedirection !== false) {
@@ -316,7 +332,7 @@ const SessionAuth: React.FC<PropsWithChildren<SessionAuthProps>> = ({ children,
             return session.current.addEventListener(onHandleEvent);
         }
         return undefined;
-    }, [props, setContext, context.loading, userContext, navigate, redirectToLogin]);
+    }, [props, setContextIfChanged, context.loading, userContext, navigate, redirectToLogin]);
 
     if (props.requireAuth !== false && (context.loading || !context.doesSessionExist)) {
         return null;

lib/build/index2.js

@@ -12,4 +12,4 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
-export const package_version = "0.42.2";
+export const package_version = "0.42.3";