From ea5ebd09659145574b36d5b67b39fdec442572ec Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Thu, 3 Jul 2025 16:10:33 +0530 Subject: [PATCH] Perf I didn't see it being a problem, so this is perhaps premature optimization --- .../new/photos/services/user-details.ts | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/web/packages/new/photos/services/user-details.ts b/web/packages/new/photos/services/user-details.ts index 2a99fdafcb..b7805e1633 100644 --- a/web/packages/new/photos/services/user-details.ts +++ b/web/packages/new/photos/services/user-details.ts @@ -238,7 +238,6 @@ const setUserDetailsSnapshot = (snapshot: UserDetails) => { export const pullUserDetails = async () => { const userDetails = await getUserDetails(); await setKV("userDetails", userDetails); - setUserDetailsSnapshot(userDetails); // Update the email for the local storage user if needed (the user might've // changed their email on a different client). @@ -247,6 +246,32 @@ export const pullUserDetails = async () => { // eslint-disable-next-line @typescript-eslint/no-unsafe-argument await setLSUser({ ...getData("user"), email: userDetails.email }); } + + // The gallery listens for updates to userDetails, so a special case, do a + // deep equality check so as to not rerender it on redundant updates. + // + // [Note: Deep equal check] + // + // React uses `Object.is` to detect changes, which changes for arrays, + // objects and combinations thereof even if the underlying data is the same. + // + // In many cases, the code can be restructured to avoid this being a + // problem, or the rerender might be infrequent enough that it is not a + // problem. + // + // However, when used with useSyncExternalStore, there is an easy way to + // prevent this, by doing a preflight deep equality comparison. + // + // There are arguably faster libraries out there that'll do the deep + // equality check for us, but since it is an infrequent pattern in our code + // base currently, we just use the JSON serialization. + // + // Mark all cases that do this using this note's title so we can audit them + // if we move to a deep equality comparison library in the future. + + if (JSON.stringify(userDetails) != JSON.stringify(userDetailsSnapshot())) { + setUserDetailsSnapshot(userDetails); + } }; /**