Displaying collections.
WHAT A KEY IS
An identifier telling React which item is which between renders.
WHY IT MATTERS
Without stable keys, React cannot tell whether an item moved, was added or was removed.
WHAT THAT CAUSES
State attached to the wrong item Inputs losing their values Unnecessary re-creation of elements
WHAT TO USE AS A KEY
A stable identifier from the data.
WHAT NOT TO USE
The array index, where the list can reorder or change Values that change between renders
WHY THE INDEX IS A PROBLEM
If an item is inserted at the start, every subsequent item's key changes meaning.
WHEN THE INDEX IS ACCEPTABLE
A list that never reorders, never has items inserted, and contains no state.
WHAT ELSE TO CONSIDER FOR LONG LISTS
Rendering only the visible portion.
WHY
Rendering thousands of items is slow regardless of how efficient the library is.
WHAT TO AVOID
Complex computation inside a list render Creating new functions or objects per item unnecessarily
WHAT TO CHECK
Whether the list re-renders when it need not.
