Issue Station
Sign In
Tools hereToolbox

nextjs - ✅(Solved) Fix SegmentViewNode produces "unique key" error when passing shared object reference [1 pull requests, 1 comments, 1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#90099•Fetched 2026-04-08 00:20:47
View on GitHub
Comments
1
Participants
1
Timeline
2
Reactions
0
Author
ceolinwillceolinwill
Participants
ceolinwillceolinwill
Timeline (top)
cross-referenced ×1issue_type_added ×1

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)

Fix Action

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] }]} />
);

PR fix notes

PR #90123: fix(next): avoid SegmentViewNode key warnings for shared cache props

Description (problem / solution / changelog)

## What?

Fix spurious React key warnings emitted at the SegmentViewNode boundary when Cache Components pages pass shared object references across a "use cache" boundary.

  • Preserve Segment Explorer registration side effects
  • Remove extra wrapper child shape emitted by SegmentViewNode
  • Add regression coverage for shared-object props scenario

Why?

Issue #90099 reports a warning:

  • Each child in a list should have a unique "key" prop.
  • Check the top-level render call using <SegmentViewNode>...

The page itself is not rendering a keyed list. The warning comes from the devtools wrapper layer (SegmentViewNode) in dev mode, not userland list rendering.

How?

Runtime fix

Updated:

  • packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx

Changes:

  • Moved segment registration behavior into a hook-style helper (useRegisterSegmentNode)
  • SegmentViewNode now returns only children ?? null
  • Keeps segmentExplorerNodeAdd/Remove behavior unchanged

This avoids introducing an extra sibling wrapper shape that triggers key checks while preserving devtools node tracking.

Tests

Added regression test and fixtures:

  • test/development/browser-logs/browser-logs.test.ts
    • should not log key warnings at SegmentViewNode for shared object refs
  • test/development/browser-logs/fixtures/cache-components-next.config.js
  • test/development/browser-logs/fixtures/cache-components-app/layout.js
  • test/development/browser-logs/fixtures/cache-components-app/page.js
  • test/development/browser-logs/fixtures/cache-components-app/client.js

Validation

  • pnpm --filter=next build (pass)
  • pnpm test-dev-webpack test/development/browser-logs/browser-logs.test.ts -t "should not log key warnings at SegmentViewNode for shared object refs" (pass)
  • pnpm lint-eslint ... on changed files (pass)

Fixes #90099

Changed files

  • packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx (modified, +4/-14)
  • test/development/browser-logs/browser-logs.test.ts (modified, +46/-0)
  • test/development/browser-logs/fixtures/cache-components-app/client.js (added, +9/-0)
  • test/development/browser-logs/fixtures/cache-components-app/layout.js (added, +7/-0)
  • test/development/browser-logs/fixtures/cache-components-app/page.js (added, +8/-0)
  • test/development/browser-logs/fixtures/cache-components-next.config.js (added, +9/-0)

Code Example

## 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)

---

"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]} />;
}

---

"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>
  );
}

---

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

---

return (
  <Display item={{ ...item, tags: [...item.tags] }} items={[{ ...item, tags: [...item.tags] }]} />
);
RAW_BUFFERClick to expand / collapse

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

  1. Run npm run dev in the terminal
  2. 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] }]} />
);

extent analysis

Fix Plan

Use a Unique Key for Shared Objects

To fix the issue, you need to provide a unique key for the shared objects passed through the "use cache" boundary.

Step-by-Step Solution

  1. Use the useId hook: Import the useId hook from react and use it to generate a unique key for each shared object.
  2. Deep-copy the shared objects: Before passing the shared objects through the "use cache" boundary, deep-copy them using the spread operator ({ ...item }) to ensure that each object has a unique reference.
  3. Use the unique key as a prop: Pass the unique key as a prop to the Display component.

Updated Code

app/page.tsx

"use cache";

import { Display } from "./client";
import { useId } from "react";

export default async function Page() {
  const item = { id: "1", name: "Apple", tags: ["fruit"] };
  const itemId = useId();
  return (
    <Display
      item={{ ...item, id: itemId, tags: [...item.tags] }}
      items={[{ ...item, id: itemId, tags: [...item.tags] }]}
    />
  );
}

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>
  );
}

Verification

  1. Run npm run dev in the terminal.
  2. Open the browser and navigate to http://localhost:3000.
  3. Check that there are no React warnings or errors.

Extra Tips

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#api#ssr#installation#tensor shape#autograd error#prompt issue#agent setup#task chaining#parallel task#integration issue

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - ✅(Solved) Fix SegmentViewNode produces "unique key" error when passing shared object reference [1 pull requests, 1 comments, 1 participants]