react-key-prop

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

280|36|Updated Jan 24, 2026

Search Tags:#react #reconciliation #frontend-performance #unique-ids #state-bugs #list-rendering #key-prop

Ready to run

npx skills add https://github.com/flpbalada/my-opencode-config --skill react-key-prop

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-key-prop
Source: https://github.com/flpbalada/my-opencode-config/tree/main/skills/react-key-prop
Command: npx skills add https://github.com/flpbalada/my-opencode-config --skill react-key-prop

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses unstable UI rendering by ensuring React list items always receive stable, unique keys, preventing item identity loss during re-renders.

Core Features & Use Cases

Enforce using data-derived IDs as keys
Avoid using array indices for dynamic lists
Provide guidance on when to generate IDs once data is loaded

Quick Start

Identify list rendering code using map and ensure key uses a stable ID from data
If IDs are missing, generate them once when data loads and attach to items
Avoid using the array index as the key for dynamic lists

Frequently Asked Questions about react-key-prop

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

FAQPage Schema

Why does my React list lose component state when items are reordered or deleted?▼

React list rendering loses component state when items lack stable keys, causing React to mismatch item identity during reconciliation. Using array indices as keys breaks this identity tracking if the list order changes dynamically. You must use stable, unique keys derived from your data.

How do I fix unstable React list rendering when mapping arrays to components?▼

To fix unstable React list rendering, enforce stable, unique keys on your mapped components. Identify your list rendering code and ensure the key attribute uses a stable, data-derived ID rather than the array index.

When should I generate unique IDs for React list items?▼

You should generate unique IDs for React list items once when the data is initially loaded. Attach these generated IDs directly to the data items before rendering to ensure they remain stable across future re-renders and state updates.

Can I use array index as the key prop for static React lists?▼

Using the array index as the key prop is only safe for completely static lists that never change order or size. For dynamic lists where items can be inserted, deleted, or reordered, array indices cause state bugs and should be replaced with data-derived IDs.

What is the best way to assign keys to React lists without natural IDs?▼

The best way to assign keys to React lists without natural IDs is to generate them once when the data loads. Attach these generated unique IDs to your data items and use them as the key prop to prevent item identity loss during re-renders.