Custom Pages in Org Profile are re-mounted every minute

[pavel-pargachev]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://github.com/pavel-pargachev/clerk-remounting-bug

Publishable key

pk_test_c3VpdGFibGUtbWFuYXRlZS00NC5jbGVyay5hY2NvdW50cy5kZXYk

Description

Steps to reproduce:

0. Run the app in the clerk-remounting-bug repo with npm run dev
1. Log-in/Sign-up
2. Create Org
3. Click "Manage" on the current org to open Org Profile popup
4. Go to "Custom Page"
5. Enter text in the input field
6. Wait for 1 minute, until clerk refreshes token, and useAuth() hook fires re-render

Actual behavior:

The Custom Organization Profile Page is re-mounted every time <OrganizationSwitcher> component is re-rendered. Causing the Custom Page to lose its react state, and input's focus. (e.g. in the minimal reproduction I added <input>, which loses the entered value)

Expected behavior:

The Custom Organization Profile Page does not re-mount. And all the Custom Page state & focus is retained.

The root cause

The cause appears to be in <CustomPortalsRenderer> which internally creates jsx elements for portals recieved from props. These portals are generated in useCustomElementPortal() hook, where it create a new instance of anonimous function and returns it as a portal functional component. The React's behavior when the reference to the jsx component changes is to re-mount the whole thing. I believe to fix it useCustomElementPortal() has to return stable references in its portal output.

Related issue 2

0. Use the same app as above
1. Go to Org Profile popup
2. Make browser window narrower, so that mobile layout of Org Profile popup is activated
3. Open the Burger Menu with "General", "Members" and "Custom Page" options
4. Close the Burget Menu
5. Make the browser window wide again, so that desktop layout is activated

Observe: Icon next to "Custom Page" on the left side nav panel on Org Profile popup disappears

Environment

System:
 OS: Windows 10 10.0.19045
 CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
 Memory: 13.55 GB / 31.89 GB
 Binaries:
 Node: 22.18.0 - C:\Program Files\nodejs\node.EXE
 npm: 11.5.2 - C:\Program Files\nodejs\npm.CMD
 Browsers:
 Edge: Chromium (139.0.3405.119)
 Internet Explorer: 11.0.19041.5794
 npmPackages:
 @clerk/nextjs: 6.31.6 => 6.31.6
 @tailwindcss/postcss: ^4.1.11 => 4.1.11
 @types/node: ^24.0.3 => 24.0.3
 @types/react: ^19.1.8 => 19.1.8
 @types/react-dom: ^19.1.6 => 19.1.6
 @types/react-syntax-highlighter: ^15.5.13 => 15.5.13
 clsx: ^2.1.1 => 2.1.1
 next: 15.3.4 => 15.3.4
 postcss: ^8.5.6 => 8.5.6
 prism-react-renderer: ^2.4.1 => 2.4.1
 react: ^19.1.0 => 19.1.0
 react-dom: ^19.1.0 => 19.1.0
 react-syntax-highlighter: ^15.6.1 => 15.6.1
 tailwindcss: ^4.1.11 => 4.1.11
 typescript: ^5.8.3 => 5.8.3

[wobsoriano]

Hi! Thank you for reporting this. Could you please test this version of ‎@clerk/nextjs to see if you still encounter the issue?

npm install @clerk/nextjs@6.27.1

[pavel-pargachev]

I have tested the older @clerk/nextjs@6.27.1, issue is still there

[wobsoriano]

I have tested the older @clerk/nextjs@6.27.1, issue is still there

Thanks! Can you run this in your browser console with that version still installed?

Clerk.version

[pavel-pargachev]

Clerk.version
'5.90.0'

[wobsoriano]

Thanks! One last thing, just want to make sure a recent fix didn't cause any of this.

Can you pass this clerk-js version to your ClerkProvider and check the issue again?

<ClerkProvider clerkJSVersion='5.78.0'>

[pavel-pargachev]

issue is still there

[wobsoriano]

Thanks for confirming that a recent update did not cause this.

So the issue here is when you use useAuth() in the parent component (MyOrgSwitcher) and when it triggers re-renders, it propagates down to the CustomPage, causing it to lose its internal state.

My suggested solution is to move useAuth() call to a more stable location, such as a higher-level component or a context provider that doesn't re-render as frequently:

export default function MyOrgSwitcher() {
 return (
 <>
 <OrganizationSwitcher>
 <OrganizationSwitcher.OrganizationProfilePage label="Custom">
 <CustomPage />
 </OrganizationSwitcher.OrganizationProfilePage>
 </OrganizationSwitcher>
 </>
 );
}

function App() {
 const { orgSlug } = useAuth();
 
 return (
 <div>
 <span>Org Slug: {orgSlug}</span>
 <MyOrgSwitcher />
 </div>
 );
}

This prevents the CustomPage from re-rendering when the auth state changes, preserving its internal state.

[pavel-pargachev]

@wobsoriano thanks for the workaround. That's exactly how I ended up fixing it.

But this does not feel right, though. Simple re-render should never clear the state of react components (or nested components), that's not how a react component should behave.

[wobsoriano]

We'll work on a solution to ensure stable references in the portal system to prevent unnecessary re-mounting of custom pages 👍🏼

Thanks for the thorough investigation and reproduction repo!