feat(clerk-react,clerk-js,shared): Dynamically update props based on …

…deep equality

* feat(clerk-react,clerk-js,shared): Dynamically update props based on deep equality

This change was made in an effort to support dynamic values for appearance, localization as modifying this values usually happens during dev where a fast HMR iteration cycle is required. However, we'd also like to support dynamic values for props like redirectUrl, where the value can be calculated based on data available during runtime, even after the Clerk components mount (eg, based on the results of a fetch request).

In order to avoid extra renders, we use the pre-existing dequal utility to make sure that expensive calculations are avoided.

* Create pink-gifts-retire.md

* fix(clerk-react,shared): Do not equally compare children and customPages

React `children` can hold circular references with other `children` arrays and this crashes the deepEqual mechanism

The customPages implementation requires the prop references to always change so there is no need to compare these on every prop update

.changeset/pink-gifts-retire.md

@@ -0,0 +1,7 @@
+---
+"@clerk/clerk-js": patch
+"@clerk/clerk-react": patch
+"@clerk/shared": minor
+---
+
+Allow dynamic values components props, even if these values change after the components are rendered. For example, a `SignIn` component with a `redirectUrl` prop passed in will always respect the latest value of `redirectUrl`.

packages/clerk-js/src/ui/customizables/AppearanceContext.tsx

@@ -1,7 +1,6 @@
-import { createContextAndHook } from '@clerk/shared/react';
+import { createContextAndHook, useDeepEqualMemo } from '@clerk/shared/react';
 import React from 'react';
 
-import { useDeepEqualMemo } from '../hooks';
 import type { AppearanceCascade, ParsedAppearance } from './parseAppearance';
 import { parseAppearance } from './parseAppearance';
 

packages/clerk-js/src/ui/hooks/index.ts

@@ -17,6 +17,5 @@ export * from './useSafeState';
 export * from './useSearchInput';
 export * from './useDebounce';
 export * from './useScrollLock';
-export * from './useDeepEqualMemo';
 export * from './useClerkModalStateParams';
 export * from './useNavigateToFlowStart';

packages/react/src/components/uiComponents.tsx

@@ -1,4 +1,5 @@
-import { logErrorInDevMode } from '@clerk/shared';
+import { logErrorInDevMode, without } from '@clerk/shared';
+import { isDeeplyEqual } from '@clerk/shared/react';
 import type {
   CreateOrganizationProps,
   OrganizationListProps,
@@ -89,11 +90,15 @@ type OrganizationSwitcherPropsWithoutCustomPages = Without<OrganizationSwitcherP
 class Portal extends React.PureComponent<MountProps> {
   private portalRef = React.createRef<HTMLDivElement>();
 
-  componentDidUpdate(prevProps: Readonly<MountProps>) {
-    if (
-      prevProps.props.appearance !== this.props.props.appearance ||
-      prevProps.props?.customPages?.length !== this.props.props?.customPages?.length
-    ) {
+  componentDidUpdate(_prevProps: Readonly<MountProps>) {
+    // Remove children and customPages from props before comparing
+    // children might hold circular references which deepEqual can't handle
+    // and the implementation of customPages relies on props getting new references
+    const prevProps = without(_prevProps.props, 'customPages', 'children');
+    const newProps = without(this.props.props, 'customPages', 'children');
+    // instead, we simply use the length of customPages to determine if it changed or not
+    const customPagesChanged = prevProps.customPages?.length !== newProps.customPages?.length;
+    if (!isDeeplyEqual(prevProps, newProps) || customPagesChanged) {
       this.props.updateProps({ node: this.portalRef.current, props: this.props.props });
     }
   }

packages/shared/src/index.ts

@@ -29,5 +29,6 @@ export * from './poller';
 export * from './proxy';
 export * from './underscore';
 export * from './url';
+export * from './object';
 export { createWorkerTimers } from './workerTimers';
 export { DEV_BROWSER_JWT_KEY, getDevBrowserJWTFromURL, setDevBrowserJWTInURL } from './devBrowser';

packages/shared/src/object.ts

@@ -0,0 +1,7 @@
+export const without = <T extends object, P extends keyof T>(obj: T, ...props: P[]): Omit<T, P> => {
+  const copy = { ...obj };
+  for (const prop of props) {
+    delete copy[prop];
+  }
+  return copy;
+};

packages/shared/src/react/hooks/index.ts

@@ -6,3 +6,4 @@ export { useSession } from './useSession';
 export { useSessionList } from './useSessionList';
 export { useUser } from './useUser';
 export { useClerk } from './useClerk';
+export { useDeepEqualMemo, isDeeplyEqual } from './useDeepEqualMemo';

packages/clerk-js/src/ui/hooks/useDeepEqualMemo.ts → packages/shared/src/react/hooks/useDeepEqualMemo.ts

@@ -16,3 +16,5 @@ const useDeepEqualMemoize = <T>(value: T) => {
 export const useDeepEqualMemo: UseDeepEqualMemo = (factory, dependencyArray) => {
   return React.useMemo(factory, useDeepEqualMemoize(dependencyArray));
 };
+
+export const isDeeplyEqual = deepEqual;