BiteSizedChunks.comLearn one small thing at a time.

Course contentsShow

140Why .map() is the Standard for Rendering Lists
141Basic List Rendering Pattern
142The Key Prop Requirement
143Accessing Item Data in .map()
144Using Array Index as a Second Parameter
145Rendering Empty States
146Inline vs Extracted Mapping Functions
147Mapping Nested Arrays
148Common .map() Mistakes and Fixes
149Alternatives to .map(): .filter() and .flatMap()
150What the Key Prop Actually Does
151Keys Preserve Component Identity
152Keys Must Be Unique Among Siblings
153Keys Must Be Stable Across Renders
154What Makes a Good Key
155Using Database IDs as Keys
156Generating Client-Side IDs
157Keys and Component State
158The Key Prop Reset Pattern
159Keys in Conditional Rendering
160Fragment Keys
161Debugging Key-Related Issues
162The Index-as-Key Pattern and Why It's Common
163Reordering Lists: When Index Keys Break
164The 'Wrong Input Has My Text' Bug
165Deletions and Index Key Shift
166Performance Implications of Bad Keys
167The 'Static Read-Only List' Exception
168Better Alternatives: Generating Stable IDs
169Refactoring from Index Keys: A Case Study
170What Makes a Key 'Stable'
171How Stable Keys Enable Reconciliation
172Performance Cost of Unstable Keys
173UUIDs and Database IDs as Ideal Keys
174Generating Keys for Client-Side Data
175Key Stability Across Sorts and Filters
176Profiling Key-Related Performance Issues

140Why .map() is the Standard for Rendering Lists
141Basic List Rendering Pattern
142The Key Prop Requirement
143Accessing Item Data in .map()
144Using Array Index as a Second Parameter
145Rendering Empty States
146Inline vs Extracted Mapping Functions
147Mapping Nested Arrays
148Common .map() Mistakes and Fixes
149Alternatives to .map(): .filter() and .flatMap()
150What the Key Prop Actually Does
151Keys Preserve Component Identity
152Keys Must Be Unique Among Siblings
153Keys Must Be Stable Across Renders
154What Makes a Good Key
155Using Database IDs as Keys
156Generating Client-Side IDs
157Keys and Component State
158The Key Prop Reset Pattern
159Keys in Conditional Rendering
160Fragment Keys
161Debugging Key-Related Issues
162The Index-as-Key Pattern and Why It's Common
163Reordering Lists: When Index Keys Break
164The 'Wrong Input Has My Text' Bug
165Deletions and Index Key Shift
166Performance Implications of Bad Keys
167The 'Static Read-Only List' Exception
168Better Alternatives: Generating Stable IDs
169Refactoring from Index Keys: A Case Study
170What Makes a Key 'Stable'
171How Stable Keys Enable Reconciliation
172Performance Cost of Unstable Keys
173UUIDs and Database IDs as Ideal Keys
174Generating Keys for Client-Side Data
175Key Stability Across Sorts and Filters
176Profiling Key-Related Performance Issues

Lesson 172 of 2,396·5. Lists and KeysPro lesson

Performance Cost of Unstable Keys

Changing keys force React to destroy and recreate elements, losing state and triggering expensive re-mounts.

This lesson is for subscribers

You've completed the free preview. Subscribe to unlock every lesson in every course.

See pricing Back to course