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 [email protected].