-
Notifications
You must be signed in to change notification settings - Fork 30.5k
Open
Copy link
Description
SegmentViewNode produces "unique key" error when passing shared object reference:
## Error Type
Console Error
## Error Message
Each child in a list should have a unique "key" prop.
Check the top-level render call using <SegmentViewNode>. It was passed a child from Page. See https://react.dev/link/warning-keys for more information.
Next.js version: 16.2.0-canary.48 (Turbopack)
Link to the code that reproduces this issue
https://github.com/ceolinwill/nextjs-cache-segmentview-key
To Reproduce
When the same object reference (containing a non-empty array property) is passed in multiple positions of the props to a client component from a "use cache" page, React produces a "unique key" error.
Minimal reproduction
app/page.tsx
"use cache";
import { Display } from "./client";
export default async function Page() {
const item = { id: "1", name: "Apple", tags: ["fruit"] };
return <Display item={item} items={[item]} />;
}app/client.tsx
"use client";
type Item = { id: string; name: string; tags: string[] };
export function Display({ item, items }: { item: Item; items: Item[] }) {
return (
<p>
{item.name}: {items.length} items
</p>
);
}Steps
- Run
npm run devin the terminal - Open the browser and navigate to
http://localhost:3000
Current vs. Expected behavior
Current Behavior
React produces a "unique key" error at the SegmentViewNode boundary.
Expected Behavior
No React warning. The data is plain props, not a list of React elements. There is no list rendering at the page level.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 25.3.0: Wed Jan 28 20:48:41 PST 2026; root:xnu-12377.81.4~5/RELEASE_ARM64_T6041
Available memory (MB): 65536
Available CPU cores: 16
Binaries:
Node: 24.12.0
npm: 11.6.2
Yarn: N/A
pnpm: 10.28.2
Relevant Packages:
next: 16.2.0-canary.48 // Latest available version is detected (16.2.0-canary.48).
eslint-config-next: N/A
react: 19.2.4
react-dom: 19.2.4
typescript: 5.9.3Which area(s) are affected? (Select all that apply)
cacheComponents
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
Workaround
Deep-copy the shared objects before passing them through the "use cache" boundary:
return (
<Display item={{ ...item, tags: [...item.tags] }} items={[{ ...item, tags: [...item.tags] }]} />
);Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels