fix(clerk-react): Re-render `<UserButton />` when `<UserButton />` props change by nikospapcom · Pull Request #5069 · clerk/javascript

nikospapcom · 2025-02-03T09:56:06Z

Description

In this pr we re-render the <UserButton /> component when the props are changing
e.g.
Before this change the following example didn't work, the label was always Chat is OFF

 <UserButton>
    <UserButton.MenuItems>
      <UserButton.Action
        label={`Chat is ${open ? 'ON' : 'OFF'}`}
        labelIcon={<DotIcon />}
        onClick={() => setIsOpen(!open)}
      />
    </UserButton.MenuItems>
  </UserButton>

Now the <UserButton /> appropriate

Screen.Recording.2025-02-03.at.11.54.28.AM.mov

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

vercel · 2025-02-03T09:56:10Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 5, 2025 0:59am

changeset-bot · 2025-02-03T09:56:11Z

🦋 Changeset detected

Latest commit: 530c4c6

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

This PR includes changesets to release 9 packages

Name	Type
@clerk/clerk-react	Patch
@clerk/chrome-extension	Patch
@clerk/elements	Patch
@clerk/clerk-expo	Patch
@clerk/nextjs	Patch
@clerk/react-router	Patch
@clerk/remix	Patch
@clerk/tanstack-start	Patch
@clerk/ui	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

nikospapcom · 2025-02-03T11:07:33Z

!snapshot

clerk-cookie · 2025-02-03T11:09:56Z

Hey @nikospapcom - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	2.1.18-snapshot.v20250203110826
@clerk/backend	1.23.10-snapshot.v20250203110826
@clerk/chrome-extension	2.2.4-snapshot.v20250203110826
@clerk/clerk-js	5.50.2-snapshot.v20250203110826
@clerk/elements	0.22.18-snapshot.v20250203110826
@clerk/clerk-expo	2.7.2-snapshot.v20250203110826
@clerk/expo-passkeys	0.1.17-snapshot.v20250203110826
@clerk/express	1.3.45-snapshot.v20250203110826
@clerk/fastify	2.1.18-snapshot.v20250203110826
@clerk/nextjs	6.10.5-snapshot.v20250203110826
@clerk/nuxt	1.0.14-snapshot.v20250203110826
@clerk/clerk-react	5.22.9-snapshot.v20250203110826
@clerk/react-router	1.0.4-snapshot.v20250203110826
@clerk/remix	4.4.20-snapshot.v20250203110826
@clerk/shared	2.20.17-snapshot.v20250203110826
@clerk/tanstack-start	0.9.1-snapshot.v20250203110826
@clerk/testing	1.4.18-snapshot.v20250203110826
@clerk/ui	0.3.19-snapshot.v20250203110826
@clerk/vue	1.1.9-snapshot.v20250203110826

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/astro@2.1.18-snapshot.v20250203110826 --save-exact

@clerk/backend

npm i @clerk/backend@1.23.10-snapshot.v20250203110826 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@2.2.4-snapshot.v20250203110826 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.50.2-snapshot.v20250203110826 --save-exact

@clerk/elements

npm i @clerk/elements@0.22.18-snapshot.v20250203110826 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.7.2-snapshot.v20250203110826 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@0.1.17-snapshot.v20250203110826 --save-exact

@clerk/express

npm i @clerk/express@1.3.45-snapshot.v20250203110826 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.1.18-snapshot.v20250203110826 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@6.10.5-snapshot.v20250203110826 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@1.0.14-snapshot.v20250203110826 --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.22.9-snapshot.v20250203110826 --save-exact

@clerk/react-router

npm i @clerk/react-router@1.0.4-snapshot.v20250203110826 --save-exact

@clerk/remix

npm i @clerk/remix@4.4.20-snapshot.v20250203110826 --save-exact

@clerk/shared

npm i @clerk/shared@2.20.17-snapshot.v20250203110826 --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.9.1-snapshot.v20250203110826 --save-exact

@clerk/testing

npm i @clerk/testing@1.4.18-snapshot.v20250203110826 --save-exact

@clerk/ui

npm i @clerk/ui@0.3.19-snapshot.v20250203110826 --save-exact

@clerk/vue

npm i @clerk/vue@1.1.9-snapshot.v20250203110826 --save-exact

panteliselef · 2025-02-03T13:03:01Z

@nikospapcom can you add e2e tests that show case the behaviour ?

alexcarpenter · 2025-02-03T14:40:34Z

Do you think it'll be confusing that this only works in UserButton and not on our other components.

octoper · 2025-02-05T00:57:41Z

packages/react/src/components/ClerkHostRenderer.tsx

-    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');


❓ Have we checked if this causes infinite re-renders?

@octoper yes I checked different scenarios and I didn't saw any re-render in <UserButton />, <UserProfile /> or <OrganizationProfile />

I filed a support ticket about this, but noting this did cause infinite re-renders in my app, so we've pinned down to clerk-react@5.22.10 for now. Not doing anything fancy with customMenuItems:

Hey @aldenquimby could you open an issue with a minimal reproduction ?

Minimal repro here: https://github.com/aldenquimby/clerk-bug-demo/blob/main/src/app/page.tsx

I have an open support ticket. Want me to create a github issue separately?

nikospapcom · 2025-02-05T09:38:35Z

Do you think it'll be confusing that this only works in UserButton and not on our other components.

What do you mean this only works in UserButton?

…ops change (#5069)

nikospapcom self-assigned this Feb 3, 2025

clerk-cookie added the react label Feb 3, 2025

nikospapcom changed the title ~~chore: Re-render <UserButton /> when <UserButton /> props change~~ chore(clerk-react): Re-render <UserButton /> when <UserButton /> props change Feb 3, 2025

clerk deleted a comment from clerk-cookie Feb 3, 2025

vercel bot deployed to Preview February 3, 2025 11:06 View deployment

nikospapcom force-pushed the nikospap/user-1160-userbutton-dont-re-render-when-a-state-out-of-it-change branch from e49d43c to b415b79 Compare February 3, 2025 11:06

clerk deleted a comment from clerk-cookie Feb 3, 2025

vercel bot deployed to Preview February 3, 2025 11:08 View deployment

nikospapcom marked this pull request as ready for review February 3, 2025 11:12

nikospapcom requested a review from brkalow February 3, 2025 11:12

nikospapcom assigned octoper and anagstef and unassigned octoper and anagstef Feb 3, 2025

nikospapcom requested review from alexcarpenter, anagstef, octoper and panteliselef February 3, 2025 11:12

nikospapcom changed the title ~~chore(clerk-react): Re-render <UserButton /> when <UserButton /> props change~~ fix(clerk-react): Re-render <UserButton /> when <UserButton /> props change Feb 3, 2025

vercel bot deployed to Preview February 3, 2025 11:39 View deployment

nikospapcom force-pushed the nikospap/user-1160-userbutton-dont-re-render-when-a-state-out-of-it-change branch from 35e4dbc to ef37969 Compare February 4, 2025 10:16

vercel bot deployed to Preview February 4, 2025 10:18 View deployment

clerk-cookie added the integration label Feb 4, 2025

vercel bot deployed to Preview February 4, 2025 12:15 View deployment

octoper reviewed Feb 5, 2025

View reviewed changes

anagstef approved these changes Feb 5, 2025

View reviewed changes

nikospapcom added 3 commits February 5, 2025 14:57

chore: Re-render <UserButton /> when <UserButton /> props change

ea81c4c

chore: Re-render <UserButton /> when <UserButton /> props change

eef87ac

chore(e2e): Add some extra tests for custom menu items

530c4c6

nikospapcom force-pushed the nikospap/user-1160-userbutton-dont-re-render-when-a-state-out-of-it-change branch from 0120183 to 530c4c6 Compare February 5, 2025 12:57

vercel bot deployed to Preview February 5, 2025 12:59 View deployment

octoper approved these changes Feb 5, 2025

View reviewed changes

nikospapcom merged commit 0fa449c into main Feb 5, 2025
27 checks passed

nikospapcom deleted the nikospap/user-1160-userbutton-dont-re-render-when-a-state-out-of-it-change branch February 5, 2025 13:41

clerk-cookie mentioned this pull request Feb 5, 2025

ci(repo): Version packages #5082

Merged

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025

fix(clerk-react): Re-render <UserButton /> when <UserButton /> pr…

66e2298

…ops change (#5069)

alexcarpenter mentioned this pull request Feb 21, 2025

User button action component does not update when props change #4704

Closed

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(clerk-react): Re-render `<UserButton />` when `<UserButton />` props change#5069

fix(clerk-react): Re-render `<UserButton />` when `<UserButton />` props change#5069
nikospapcom merged 3 commits intomainfrom
nikospap/user-1160-userbutton-dont-re-render-when-a-state-out-of-it-change

nikospapcom commented Feb 3, 2025

Uh oh!

vercel bot commented Feb 3, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Feb 3, 2025 •

edited

Loading

Uh oh!

nikospapcom commented Feb 3, 2025

Uh oh!

clerk-cookie commented Feb 3, 2025

Uh oh!

panteliselef commented Feb 3, 2025

Uh oh!

alexcarpenter commented Feb 3, 2025

Uh oh!

octoper Feb 5, 2025

Uh oh!

nikospapcom Feb 5, 2025 •

edited

Loading

Uh oh!

aldenquimby Feb 12, 2025

Uh oh!

panteliselef Feb 12, 2025

Uh oh!

aldenquimby Feb 12, 2025

Uh oh!

nikospapcom commented Feb 5, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Conversation

nikospapcom commented Feb 3, 2025

Description

Checklist

Type of change

Uh oh!

vercel bot commented Feb 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Feb 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

nikospapcom commented Feb 3, 2025

Uh oh!

clerk-cookie commented Feb 3, 2025

Uh oh!

panteliselef commented Feb 3, 2025

Uh oh!

alexcarpenter commented Feb 3, 2025

Uh oh!

octoper Feb 5, 2025

Choose a reason for hiding this comment

Uh oh!

nikospapcom Feb 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aldenquimby Feb 12, 2025

Choose a reason for hiding this comment

Uh oh!

panteliselef Feb 12, 2025

Choose a reason for hiding this comment

Uh oh!

aldenquimby Feb 12, 2025

Choose a reason for hiding this comment

Uh oh!

nikospapcom commented Feb 5, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

vercel bot commented Feb 3, 2025 •

edited

Loading

changeset-bot bot commented Feb 3, 2025 •

edited

Loading

nikospapcom Feb 5, 2025 •

edited

Loading