SegmentViewNode produces "unique key" error when passing shared object reference
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
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.3
Which 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] }]} />
);
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the reproduction's app/page.tsx and app/client.tsx, then run npm run dev and confirm the warning at the SegmentViewNode boundary. Trace how the shared object and its non-empty tags array cross the "use cache" boundary. Done means the reproduction no longer emits the unique-key warning without requiring the deep-copy workaround.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- backend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100