From 46813adf603ad49b22e33eccaca631707b552158 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Tue, 25 Nov 2025 16:19:39 -0800 Subject: [PATCH 1/8] chore: Attempt fix API keys AIO freezing within UserButton.UserProfilePage --- .../src/components/ClerkHostRenderer.tsx | 25 +++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/ClerkHostRenderer.tsx b/packages/react/src/components/ClerkHostRenderer.tsx index 3e1304caebc..2ceca7c9e2b 100644 --- a/packages/react/src/components/ClerkHostRenderer.tsx +++ b/packages/react/src/components/ClerkHostRenderer.tsx @@ -78,9 +78,30 @@ export class ClerkHostRenderer extends React.PureComponent< const prevProps = without(_prevProps.props, 'customPages', 'customMenuItems', 'children'); const newProps = without(this.props.props, 'customPages', 'customMenuItems', 'children'); + // Also strip customPages from nested profile props + if (prevProps.userProfileProps) { + prevProps.userProfileProps = without(prevProps.userProfileProps, 'customPages'); + } + if (newProps.userProfileProps) { + newProps.userProfileProps = without(newProps.userProfileProps, 'customPages'); + } + if (prevProps.organizationProfileProps) { + prevProps.organizationProfileProps = without(prevProps.organizationProfileProps, 'customPages'); + } + if (newProps.organizationProfileProps) { + newProps.organizationProfileProps = without(newProps.organizationProfileProps, 'customPages'); + } + // 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; + const customPagesChanged = + _prevProps.props.customPages?.length !== this.props.props.customPages?.length || + _prevProps.props.userProfileProps?.customPages?.length !== + this.props.props.userProfileProps?.customPages?.length || + _prevProps.props.organizationProfileProps?.customPages?.length !== + this.props.props.organizationProfileProps?.customPages?.length; + + const customMenuItemsChanged = + _prevProps.props.customMenuItems?.length !== this.props.props.customMenuItems?.length; // Strip out mountIcon and unmountIcon handlers since they're always generated as new function references, // which would cause unnecessary re-renders in deep equality checks From 9ec689d3fb76ce7db762043891042164b6200b93 Mon Sep 17 00:00:00 2001 From: Robert Soriano Date: Tue, 25 Nov 2025 16:20:28 -0800 Subject: [PATCH 2/8] placeholder changeset --- .changeset/nice-goats-visit.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/nice-goats-visit.md diff --git a/.changeset/nice-goats-visit.md b/.changeset/nice-goats-visit.md new file mode 100644 index 00000000000..0630e4f4c04 --- /dev/null +++ b/.changeset/nice-goats-visit.md @@ -0,0 +1,5 @@ +--- +"@clerk/clerk-react": patch +--- + +Attempt to fix API keys AIO freezing within UserButton.UserProfilePage From 0ddf58b8e30309afa4573aa99957d41bcd3082b6 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Tue, 25 Nov 2025 16:32:43 -0800 Subject: [PATCH 3/8] attempt --- packages/react/src/components/uiComponents.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/uiComponents.tsx b/packages/react/src/components/uiComponents.tsx index e1889849582..d6aa5b74132 100644 --- a/packages/react/src/components/uiComponents.tsx +++ b/packages/react/src/components/uiComponents.tsx @@ -257,7 +257,7 @@ const _UserButton = withClerk( const { customPages, customPagesPortals } = useUserProfileCustomPages(props.children, { allowForAnyChildren: !!props.__experimental_asProvider, }); - const userProfileProps = Object.assign(props.userProfileProps || {}, { customPages }); + const userProfileProps = Object.assign({}, props.userProfileProps, { customPages }); const { customMenuItems, customMenuItemsPortals } = useUserButtonCustomMenuItems(props.children, { allowForAnyChildren: !!props.__experimental_asProvider, }); @@ -435,7 +435,7 @@ const _OrganizationSwitcher = withClerk( const { customPages, customPagesPortals } = useOrganizationProfileCustomPages(props.children, { allowForAnyChildren: !!props.__experimental_asProvider, }); - const organizationProfileProps = Object.assign(props.organizationProfileProps || {}, { customPages }); + const organizationProfileProps = Object.assign({}, props.organizationProfileProps, { customPages }); const sanitizedChildren = useSanitizedChildren(props.children); const passableProps = { From fcb975e63f4e1fdf33168da5fb242d92d218cf50 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Tue, 25 Nov 2025 16:43:33 -0800 Subject: [PATCH 4/8] chore: remove equality test --- .../src/components/ClerkHostRenderer.tsx | 25 ++----------------- 1 file changed, 2 insertions(+), 23 deletions(-) diff --git a/packages/react/src/components/ClerkHostRenderer.tsx b/packages/react/src/components/ClerkHostRenderer.tsx index 2ceca7c9e2b..3e1304caebc 100644 --- a/packages/react/src/components/ClerkHostRenderer.tsx +++ b/packages/react/src/components/ClerkHostRenderer.tsx @@ -78,30 +78,9 @@ export class ClerkHostRenderer extends React.PureComponent< const prevProps = without(_prevProps.props, 'customPages', 'customMenuItems', 'children'); const newProps = without(this.props.props, 'customPages', 'customMenuItems', 'children'); - // Also strip customPages from nested profile props - if (prevProps.userProfileProps) { - prevProps.userProfileProps = without(prevProps.userProfileProps, 'customPages'); - } - if (newProps.userProfileProps) { - newProps.userProfileProps = without(newProps.userProfileProps, 'customPages'); - } - if (prevProps.organizationProfileProps) { - prevProps.organizationProfileProps = without(prevProps.organizationProfileProps, 'customPages'); - } - if (newProps.organizationProfileProps) { - newProps.organizationProfileProps = without(newProps.organizationProfileProps, 'customPages'); - } - // instead, we simply use the length of customPages to determine if it changed or not - const customPagesChanged = - _prevProps.props.customPages?.length !== this.props.props.customPages?.length || - _prevProps.props.userProfileProps?.customPages?.length !== - this.props.props.userProfileProps?.customPages?.length || - _prevProps.props.organizationProfileProps?.customPages?.length !== - this.props.props.organizationProfileProps?.customPages?.length; - - const customMenuItemsChanged = - _prevProps.props.customMenuItems?.length !== this.props.props.customMenuItems?.length; + const customPagesChanged = prevProps.customPages?.length !== newProps.customPages?.length; + const customMenuItemsChanged = prevProps.customMenuItems?.length !== newProps.customMenuItems?.length; // Strip out mountIcon and unmountIcon handlers since they're always generated as new function references, // which would cause unnecessary re-renders in deep equality checks From c061534f59bf2f28693a97a342870f52a78cb363 Mon Sep 17 00:00:00 2001 From: Robert Soriano Date: Tue, 25 Nov 2025 16:55:31 -0800 Subject: [PATCH 5/8] chore: add changeset --- .changeset/hot-ads-relate.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/hot-ads-relate.md diff --git a/.changeset/hot-ads-relate.md b/.changeset/hot-ads-relate.md new file mode 100644 index 00000000000..bc3d96e6976 --- /dev/null +++ b/.changeset/hot-ads-relate.md @@ -0,0 +1,5 @@ +--- +"@clerk/clerk-react": patch +--- + +Fixed an issue where `` mounted in a custom page caused an application to freeze. From 1dbb055c3edd797a38bd15eb923525a1da3d5e85 Mon Sep 17 00:00:00 2001 From: Robert Soriano Date: Tue, 25 Nov 2025 16:57:58 -0800 Subject: [PATCH 6/8] Delete .changeset/nice-goats-visit.md --- .changeset/nice-goats-visit.md | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .changeset/nice-goats-visit.md diff --git a/.changeset/nice-goats-visit.md b/.changeset/nice-goats-visit.md deleted file mode 100644 index 0630e4f4c04..00000000000 --- a/.changeset/nice-goats-visit.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@clerk/clerk-react": patch ---- - -Attempt to fix API keys AIO freezing within UserButton.UserProfilePage From 64844b9a6c7421556d81751b06a94306d81a3fd4 Mon Sep 17 00:00:00 2001 From: Robert Soriano Date: Tue, 25 Nov 2025 17:36:19 -0800 Subject: [PATCH 7/8] Update packages/react/src/components/uiComponents.tsx Co-authored-by: Jacek Radko --- packages/react/src/components/uiComponents.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/uiComponents.tsx b/packages/react/src/components/uiComponents.tsx index d6aa5b74132..7106fd2895d 100644 --- a/packages/react/src/components/uiComponents.tsx +++ b/packages/react/src/components/uiComponents.tsx @@ -257,7 +257,7 @@ const _UserButton = withClerk( const { customPages, customPagesPortals } = useUserProfileCustomPages(props.children, { allowForAnyChildren: !!props.__experimental_asProvider, }); - const userProfileProps = Object.assign({}, props.userProfileProps, { customPages }); + const userProfileProps = { ...props.userProfileProps, customPages }; const { customMenuItems, customMenuItemsPortals } = useUserButtonCustomMenuItems(props.children, { allowForAnyChildren: !!props.__experimental_asProvider, }); From 03208b06132e305f73d100e4b141850f2388f391 Mon Sep 17 00:00:00 2001 From: Robert Soriano Date: Tue, 25 Nov 2025 17:36:25 -0800 Subject: [PATCH 8/8] Update packages/react/src/components/uiComponents.tsx Co-authored-by: Jacek Radko --- packages/react/src/components/uiComponents.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/uiComponents.tsx b/packages/react/src/components/uiComponents.tsx index 7106fd2895d..1368145f91e 100644 --- a/packages/react/src/components/uiComponents.tsx +++ b/packages/react/src/components/uiComponents.tsx @@ -435,7 +435,7 @@ const _OrganizationSwitcher = withClerk( const { customPages, customPagesPortals } = useOrganizationProfileCustomPages(props.children, { allowForAnyChildren: !!props.__experimental_asProvider, }); - const organizationProfileProps = Object.assign({}, props.organizationProfileProps, { customPages }); + const organizationProfileProps = { ...props.organizationProfileProps, customPages }; const sanitizedChildren = useSanitizedChildren(props.children); const passableProps = {