Files
kolaytercih/.agents/skills/vercel-react-best-practices/rules/server-dedup-props.md
bilalgursen ea85a053c5
All checks were successful
Deploy / deploy (push) Successful in 7m30s
feat: add new skills to skills-lock.json and update use-pixel-heat component
- Added new skills: find-skills, frontend-ui-engineering, and vercel-react-best-practices to skills-lock.json.
- Updated use-pixel-heat.ts to import both animate and AnimationPlaybackControls from motion for improved animation handling.
2026-08-08 16:08:54 +03:00

2.0 KiB
Raw Blame History

title, impact, impactDescription, tags
title impact impactDescription tags
Avoid Duplicate Serialization in RSC Props LOW reduces network payload by avoiding duplicate serialization server, rsc, serialization, props, client-components

Avoid Duplicate Serialization in RSC Props

Impact: LOW (reduces network payload by avoiding duplicate serialization)

RSC→client serialization deduplicates by object reference, not value. Same reference = serialized once; new reference = serialized again. Do transformations (.toSorted(), .filter(), .map()) in client, not server.

Incorrect (duplicates array):

// RSC: sends 6 strings (2 arrays × 3 items)
<ClientList usernames={usernames} usernamesOrdered={usernames.toSorted()} />

Correct (sends 3 strings):

// RSC: send once
<ClientList usernames={usernames} />

// Client: transform there
'use client'
const sorted = useMemo(() => [...usernames].sort(), [usernames])

Nested deduplication behavior:

Deduplication works recursively. Impact varies by data type:

  • string[], number[], boolean[]: HIGH impact - array + all primitives fully duplicated
  • object[]: LOW impact - array duplicated, but nested objects deduplicated by reference
// string[] - duplicates everything
usernames={['a','b']} sorted={usernames.toSorted()} // sends 4 strings

// object[] - duplicates array structure only
users={[{id:1},{id:2}]} sorted={users.toSorted()} // sends 2 arrays + 2 unique objects (not 4)

Operations breaking deduplication (create new references):

  • Arrays: .toSorted(), .filter(), .map(), .slice(), [...arr]
  • Objects: {...obj}, Object.assign(), structuredClone(), JSON.parse(JSON.stringify())

More examples:

// ❌ Bad
<C users={users} active={users.filter(u => u.active)} />
<C product={product} productName={product.name} />

// ✅ Good
<C users={users} />
<C product={product} />
// Do filtering/destructuring in client

Exception: Pass derived data when transformation is expensive or client doesn't need original.