skills.rest
Thomashighbaugh
ThomashighbaughCOMMUNITY
Explore all skills by this author →
Website𝕏@thomashighbaughGitHub

react-key-prop

Identify and enforce stable list item keys in React components.

1|Updated Mar 20, 2026
Search Tags:#performance#react#reconciliation#list-rendering#key-prop#unique-id
One-click install
npx skills add https://github.com/Thomashighbaugh/opencode --skill react-key-prop-thomashighbaugh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-key-prop
Source: https://github.com/Thomashighbaugh/opencode/tree/main/skills/react-key-prop
Command: npx skills add https://github.com/Thomashighbaugh/opencode --skill react-key-prop-thomashighbaugh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers ensure stable identity for list items in React by teaching when to use data IDs versus array indices, how to generate IDs, and how to avoid common key-related performance pitfalls in reconciliations.

Core Features & Use Cases

  • Use Data IDs (Preferred): Always use unique, stable identifiers directly from your data to serve as the key.
  • Generate IDs on Data Load: Create IDs once when data is loaded if items lack IDs (e.g., attach _tempId: nanoid()).
  • When Index Is Acceptable (Rare): Only use index as key when the list is absolutely static and items have no internal state.
  • Anti-Patterns to Avoid: Never generate keys during render; don't use index for dynamic lists; avoid useId() for list keys.
  • Quick Real-World Example: Rendering a todo list with each item having a unique id to preserve component state across updates.

Quick Start

Map your data to components using a stable, unique id from each item as the key.

Frequently Asked Questions about react-key-prop

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does React require a unique key prop when rendering dynamic lists?▼

React requires a unique key prop for dynamic lists to ensure stable item identity during reconciliation. This preserves component state across updates and ensures efficient rendering when items are added, removed, or reordered.

How do I assign stable keys to React list items if my data doesn't have IDs?▼

Generate IDs once when data is loaded using a library like nanoid. Attach a temporary ID property to each item before rendering, ensuring stable unique keys without regenerating them during the render cycle.

Is it safe to use array index as the key prop in React?▼

Using array index as the key prop is only safe for absolutely static lists with no internal state. For dynamic lists, indices cause bugs and performance issues during reordering or deletion because React misidentifies item identity.

Can I use React's useId hook to generate list item keys?▼

Avoid using React's useId hook for list item keys. It generates new IDs during render, breaking stable identity. Use unique data IDs or generate IDs once on data load to maintain reliable reconciliation.

What are common React key prop anti-patterns that hurt performance?▼

Common key prop anti-patterns include generating keys during render, using array indices for dynamic lists, and using useId. These break stable identity, degrade reconciliation performance, and cause component state bugs.

Related Skills

Explore More Software Engineering Skills→
Chris-MaskeyChris-Maskey

react-key-prop

Guide React key prop usage for stable list rendering and reconciliation.

Community
Basic
suwandresuwandre

react-key-prop

Enforce stable, unique keys for React list items during reconciliation.

Community
Basic
xiaoniuge36xiaoniuge36
6

table-generator

Generate dynamic data tables for React and Vue.js with pagination and search.

Community
Intermediate
flpbaladaflpbalada
280

react-key-prop

Enforce stable, unique data-derived keys for React list items.

Community
Basic