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

[nikospapcom]

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

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[vercel]

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]

🦋 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]

!snapshot

[clerk-cookie]

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]

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

[alexcarpenter]

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

[octoper]

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

[nikospapcom]

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

[nikospapcom]

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?