useId format mismatch in client and server components (React 19.1)

[kachkaev]

Link to the code that reproduces this issue

https://github.com/kachkaev/next-js-react-19-use-id-mwe

To Reproduce

1. Run next dev
2. Open http://localhost:3000
3. Observe the following page:

useId on server: :S1:
useId on client: «R2fl7»
useId on server: :S2:
useId on client: «R4fl7»

Current vs. Expected behavior

When React.useId() is called in a server component, the result is :r123:. When it is called in a client component, the result is «r123». In a project that depends on React 19.1.0+, I expect useId to be «r123» in both cases. Here is why:

• Use valid CSS selectors in useId format facebook/react#32001

• https://github.com/facebook/react/releases/tag/v19.1.0

  • ...
  • Updated useId to use valid CSS selectors, changing format from :r123: to «r123». #32001
  • ...

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.4.0: Fri Apr 11 18:33:47 PDT 2025; root:xnu-11417.101.15~117/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 22.13.1
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.1.0
Relevant Packages:
  next: 15.4.0-canary.15 // Latest available version is detected (15.4.0-canary.15).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

React, Runtime

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

Running next build / next dev --turbopack / next build --turbopack produces the same output.

Before React 19.1, the result of React.useId() had to be sanitized in order to be used in CSS selectors. This is because code like document.querySelector('#:r123:') would otherwise crash. After upgrading React to 19.1.0, I removed a helper function to sanitize useId and got a runtime error in an event handler. I did not expect that, given what I saw in React changelog.

I understand that Next.js comes with two React instances the their versions mismatch. However, as an end user I don’t need to know this and I should expect coherence between useId calls in server and client components.

According to React devtools, my server component was rendered with react-dom@19.2.0-canary-197d6a04-20250424.

[kachkaev]

As it turns out, it’s an upstream React bug. The fix: facebook/react#33099. I'll keep the issue open until it is fixed in next@canary by upgrading React.

[kachkaev]

facebook/react#33099 has landed, so the fix should appear in the next react@canary.

[kachkaev]

Should be fixed by #79477

[kachkaev]

This issue has been fixed in v15.4.0-canary.88 via #79477. More recently, React started using _ instead of : or «» in useId(): facebook/react#33422. It has already landed next@canary.

It should be safe to use useId() in CSS selectors now without any string replacement.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.