useId format mismatch in client and server components (React 19.1) #78691
Description
Link to the code that reproduces this issue
https://github.com/kachkaev/next-js-react-19-use-id-mwe
To Reproduce
- Run
next dev - Open http://localhost:3000
- 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/AWhich 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].
