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

### 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 `:xyz:`. When it is called in a client component, the result is `«xyz»`. In a project that depends on React 19.1.0+, I expect `useId` to be `«xyz»` in both cases. Here is why: - https://github.com/facebook/react/pull/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](https://github.com/facebook/react/pull/32001) > - ... ### Provide environment information ```bash 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('#:xyz:')` 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]`.