Skip to content

fix(react): key custom page portals by stable id#8730

Merged
jacekradko merged 1 commit into
je/orgprofile-custom-pages-rendering-bugfrom
jacek/custom-page-portal-stable-keys
Jun 2, 2026
Merged

fix(react): key custom page portals by stable id#8730
jacekradko merged 1 commit into
je/orgprofile-custom-pages-rendering-bugfrom
jacek/custom-page-portal-stable-keys

Conversation

@jacekradko
Copy link
Copy Markdown
Member

Follow-up to the custom-page remount fix. That change stabilized each portal's identity so a custom page survives a parent rerender; this goes one step further. CustomPortalsRenderer was still keying portals by array index, so adding, removing, or reordering pages remounted the survivors anyway. Each portal now carries a stable key from its portalId, so a page that moves position reconciles as an update.

- customPagesPortals.map((portal, index) => createElement(portal, { key: index }))
+ customPagesPortals.map(({ key, portal }) => createElement(portal, { key }))

The hooks now emit { key, portal } (with content:/label:/icon: prefixes so a page's two portals stay distinct). Coverage added: a jsdom integration test that renders through the real portal path (no remount on a parent rerender or an insert), and an e2e test that a custom page keeps its local state across a parent rerender.

CustomPortalsRenderer keyed portals by array index, so adding, removing, or reordering custom pages remounted the survivors even though their portal identity was stable. Each portal now carries a stable key derived from its portalId, so React reconciles a moved page as an update.

Includes jsdom and e2e coverage for the remount behavior.
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Jun 2, 2026

🦋 Changeset detected

Latest commit: 91b4771

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
Name Type
@clerk/react Patch
@clerk/chrome-extension Patch
@clerk/expo Patch
@clerk/nextjs Patch
@clerk/react-router Patch
@clerk/tanstack-react-start Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 2, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
clerk-js-sandbox Ready Ready Preview, Comment Jun 2, 2026 8:39pm

Request Review

@jacekradko jacekradko marked this pull request as ready for review June 2, 2026 21:31
@jacekradko jacekradko merged commit 93d045e into je/orgprofile-custom-pages-rendering-bug Jun 2, 2026
7 checks passed
@jacekradko jacekradko deleted the jacek/custom-page-portal-stable-keys branch June 2, 2026 21:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant