AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug Sandbox
Back to Radar

UseId() In Server Components Returns Duplicate Ids After Client-Side Navigation Due To Missing IdentifierPrefix In Flight Renderer

Next.js does not pass identifierPrefix to React Flight renderer, causing useId() counters to reset per request and collide across client-side navigations when shared layouts persist.

highConfidence 95%Next.jsAffected V16.3.4Affected V16.4.0-Canary.20Affected V>=13.0.0

Origin Analysis

React Flight's useId generates ids based on a request-scoped counter with an optional identifierPrefix. Next.js never provides a prefix, so each RSC request restarts counting at 1. When a client-side navigation renders only changed segments, the new response's ids collide with ids already present in the DOM from persisted layouts.
1. Clone repro: https://github.com/YuichiroFukushi/next-rsc-useid-collision 2. npm install && npm run dev 3. Open http://localhost:3000/other (hard load) 4. Click 'Back to /' via next/link 5. Observe home page's dots texture rendered with root layout's lines pattern, and both captions show same id _S_1_. Reload fixes ids.

Fixing Code Block

Edge Case Audit

Using a global counter alone may cause collisions across separate serverless instances (each starts at 0). Prefer combining counter with a random component or use request-scoped ID. Also ensure the prefix is consistent across all chunks of a single response (including streaming and Server Actions). Changes to generated IDs may affect tests or snapshots expecting the old format. Rollback: remove the identifierPrefix option to revert to previous behavior.

Ecosystem Topology