User button action component does not update when props change

[allan-cannon]

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/allan-cannon/repro

Publishable key

pk_test_bmV4dC1tb3NxdWl0by0yLmNsZXJrLmFjY291bnRzLmRldiQ

Description

Screen recording of issue

Steps to reproduce:

Detailed reproduction steps are in the repo readme. For the specific issue:

1. Click the user button to open the menu
2. Click the custom menu item - this triggers some state to change that the menu item is dependent on
3. Click the user button to open the menu again
4. Notice that the custom menu item has not been updated even though its dependency changed

Expected behavior:

Changing a prop on a component should cause the component to rerender

Actual behavior:

The component does not rerender when props change.

Environment

System:
    OS: macOS 15.1.1
    CPU: (11) arm64 Apple M3 Pro
    Memory: 85.17 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
    pnpm: 9.14.2 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 18.1.1
  npmPackages:
    @clerk/clerk-react: ^5.2.10 => 5.18.0 
    @types/node: ^22.0.0 => 22.10.1 
    @types/react: ^18.3.3 => 18.3.12 
    @types/react-dom: ^18.3.0 => 18.3.1 
    @vitejs/plugin-react: ^4.3.1 => 4.3.4 
    autoprefixer: ^10.4.19 => 10.4.20 
    eslint: ^8.56.0 => 8.57.1 
    eslint-plugin-react: ^7.34.4 => 7.37.2 
    eslint-plugin-react-hooks: ^4.6.2 => 4.6.2 
    eslint-plugin-react-refresh: ^0.4.8 => 0.4.16 
    postcss: ^8.4.40 => 8.4.49 
    prettier: 3.3.3 => 3.3.3 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    react-router-dom: ^6.25.1 => 6.28.0 
    tailwind: ^4.0.0 => 4.0.0 
    tailwindcss: ^3.4.7 => 3.4.15 
    ts-node: ^10.9.2 => 10.9.2 
    typescript: ^5.5.4 => 5.7.2 
    vite: ^5.3.5 => 5.4.11

[anishwij]

I had this issue too! I tried to do

    <UserButton>
      <UserButton.MenuItems>
        <UserButton.Action
          label='Newsletter'
          labelIcon={<Switch onClick={(e) => e.stopPropagation()} />}
          onClick={(e) => {
            e.preventDefault()
          }}
        />
      </UserButton.MenuItems>
    </UserButton>

But that didn't work too because the onClick just returns void...

Honestly having something like another component for our custom implementations would be useful. Like having a UserButton.Row that isn't memoized.

    <UserButton>
      <UserButton.MenuItems>
        <UserButton.Row
          label='Newsletter'
        >
           <Switch onClick={handleClick} />
        </UserButton.Row>
      </UserButton.MenuItems>
    </UserButton>