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

.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;