From b415b79417e1e61a395f2e9b78bdeab9d73ae4ae Mon Sep 17 00:00:00 2001 From: nikospapcom Date: Mon, 3 Feb 2025 13:06:38 +0200 Subject: [PATCH] chore: Re-render `` when `` props change --- .changeset/healthy-panthers-shave.md | 5 +++++ packages/react/src/components/ClerkHostRenderer.tsx | 7 ++++--- 2 files changed, 9 insertions(+), 3 deletions(-) create mode 100644 .changeset/healthy-panthers-shave.md diff --git a/.changeset/healthy-panthers-shave.md b/.changeset/healthy-panthers-shave.md new file mode 100644 index 00000000000..d9cd0b9c74c --- /dev/null +++ b/.changeset/healthy-panthers-shave.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-react': patch +--- + +Re-render `` when `` props change diff --git a/packages/react/src/components/ClerkHostRenderer.tsx b/packages/react/src/components/ClerkHostRenderer.tsx index 19b8187718d..ebaa84add87 100644 --- a/packages/react/src/components/ClerkHostRenderer.tsx +++ b/packages/react/src/components/ClerkHostRenderer.tsx @@ -63,9 +63,10 @@ export class ClerkHostRenderer extends React.PureComponent< // Remove children and customPages from props before comparing // children might hold circular references which deepEqual can't handle - // and the implementation of customPages or customMenuItems relies on props getting new references - const prevProps = without(_prevProps.props, 'customPages', 'customMenuItems', 'children'); - const newProps = without(this.props.props, 'customPages', 'customMenuItems', 'children'); + // 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; const customMenuItemsChanged = prevProps.customMenuItems?.length !== newProps.customMenuItems?.length;