Hydration error caused by mismatched `id` and/or ARIA attributes

[ZeroWave022]

Bug report

We get a hydration error from various components that generate their id or aria-controls using React (or your own internal implementation) of the useId hook. The common factor seems to be the usage of the Slot component. We're using the Next.js app router, which is using the latest version of React canary behind the scenes, as described in the documentation:

Good to know: The App Router uses React canary releases built-in, which include all the stable React 19 changes, as well as newer features being validated in frameworks.

The issue is happening starting from Next.js 15.5.0 which seems to use a newer version of React canary. It's also present on the latest version of Next.js.

Downgrading to Next.js 15.4.7 seems to resolve the issue (possibly because of the version using an older version of React).

Could be relevant: React has updated the default prefix of useId in React 19.2

Current Behavior

Hydration error, some examples follow:

Example 1

A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

   ...
    <MenuProvider scope={{Menu:[...], ...}} open={false} onOpenChange={function} content={null} ...>
      <MenuProvider scope={{Menu:[...], ...}} onClose={function Menu.useCallback} isUsingKeyboardRef={{current:false}} ...>
        <DropdownMenuTrigger asChild={true}>
          <DropdownMenuTrigger asChild={true}>
            <MenuAnchor asChild={true} __scopeMenu={{Menu:[...], ...}}>
              <PopperAnchor __scopePopper={{Menu:[...], ...}} asChild={true} ref={null}>
                <Primitive.div asChild={true} ref={function}>
                  <Primitive.div.Slot ref={function}>
                    <Primitive.div.SlotClone ref={function}>
                      <Primitive.button type="button" id="radix-_R_6..." aria-haspopup="menu" aria-expanded={false} ...>
                        <Primitive.button.Slot type="button" id="radix-_R_6..." aria-haspopup="menu" ...>
                          <Primitive.button.SlotClone type="button" id="radix-_R_6..." aria-haspopup="menu" ...>
                            <Button className="h-fit" variant="nav" size="none" aria-label="Open navig..." type="button" ...>
                              <button
                                className="cursor-pointer rounded-md ring-offset-background focus-visible:outline-hidd..."
                                ref={function}
                                aria-label="Open navigation menu"
                                type="button"
+                               id="radix-_R_66itmdl5rlb_"
-                               id="radix-_R_166itmdl5rlb_"
                                aria-haspopup="menu"
                                aria-expanded={false}
                                aria-controls={undefined}
                                data-state="closed"
                                data-disabled={undefined}
                                disabled={false}
                                onPointerDown={function handleEvent}
                                onKeyDown={function handleEvent}
                              >

Example 2

A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  ...
    <Header>
      <header className="clamp-[px-...">
        ...
          <div className="flex">
            <MatrixLink isLoggedIn={false} t={{title:"Mat...", ...}} className="xs:flex hi...">
              <Dialog open={false} onOpenChange={function bound dispatchSetState}>
                <Dialog data-slot="dialog" open={false} onOpenChange={function bound dispatchSetState}>
                  <DialogProvider scope={undefined} triggerRef={{current:null}} contentRef={{current:null}} ...>
                    <DialogTrigger asChild={true}>
                      <DialogTrigger data-slot="dialog-tri..." asChild={true}>
                        <Primitive.button type="button" aria-haspopup="dialog" aria-expanded={false} ...>
                          <Primitive.button.Slot type="button" aria-haspopup="dialog" aria-expanded={false} ...>
                            <Primitive.button.SlotClone type="button" aria-haspopup="dialog" aria-expanded={false} ...>
                              <Button className="xs:flex hi..." variant="ghost" size="icon" title="Matrix Log..." ...>
                                <button
                                  className="cursor-pointer rounded-md ring-offset-background transition-colors focus-..."
                                  ref={function}
                                  title="Matrix Login Information"
                                  aria-label="Matrix Login Information"
                                  type="button"
                                  aria-haspopup="dialog"
                                  aria-expanded={false}
+                                 aria-controls="radix-_R_a6itmdl5rlb_"
-                                 aria-controls="radix-_R_q6itmdl5rlb_"
                                  data-state="closed"
                                  data-slot="dialog-trigger"
                                  onClick={function handleEvent}
                                >

Expected behavior

No hydration error caused by mismatching id, aria-controls or other ARIA attributes generated by randomized id.

Your environment

Software	Name(s)	Version
Radix Package(s)		@radix-ui/react-dialog@1.1.15, @radix-ui/react-slot@1.2.3
React	n/a	19.2.0
Browser		Firefox 144.0, Chrome 141.0.7390.108
Assistive tech
Node	n/a	22.14.0
bun		1.3

[z1haze]

Have you found a workaround for this? We too are running into this same issue, seems to be with any Trigger components from radix, and using asChild

[eli-front]

I'm also seeing this on https://github.com/bvaughn/react-resizable-panels. Seems like it could be a react useId with next.js issue instead of a radix-specific one.

[chaance]

This is not a bug in Radix. It will need to be addressed in React before hitting stable. We do not guarantee support for canary releases of React.

[ZeroWave022]

Have you found a workaround for this? We too are running into this same issue, seems to be with any Trigger components from radix, and using asChild

Unfortunately, I haven't. We've ended up using Next.js 15.4.7 for now

[ybelakov]

why is this closed?

[eli-front]

why is this closed?

Because it's not a radix issue. This needs to be addressed in either react or next.js (depending on which is the cause)

[z1haze]

We are using react 19.1, and not nextjs -- we changed no dependencies and this issue popped up out of nowhere with radix ui components as described in the issue description.

[eli-front]

We are using react 19.1, and not nextjs -- we changed no dependencies and this issue popped up out of nowhere with radix ui components as described in the issue description.

Then possibly it's a react issue

[omridevk]

@eli-front
facebook/react#24669
According to React team, this is wrong usage of useId, as it cannot guarantue to be identical if react tree is different on the server than on the client, valid example for this is Suspense, when a component suspense on the server, but was hydrated without the need to hydrate (streamed the html), this will cause the tree to not match causing a lot of hydration errors from any Radix ui components used inside of suspense

I doubt this will ever be addressed by the React team, I think if possible, Radix ui should use different mechanism to create ids for a11y

[jakubweber]

Is there a workaround until the fix is released? suppressHydrationWarning ?

[shaked-frame]

suppressHydration will not work, if you have suspense boundaries between the element and the suppress attribute (in nextjs)
@jakubweber

[angelocala94]

Any news about this?

[jjenzz]

@chaance we're also seeing this issue in latest stable versions. i wonder if a simple solution for now would be to update all components that use useId to accept a deterministic id prop like password-toggle-field.tsx does, so we can manually suppress this?