What happens if you omit keys in a list when rendering in React?

What happens if you omit keys in a list when rendering in React?

• A. The app will crash with an error
• B. Keys are automatically assigned, so nothing happens
• C. React might scramble the list items into the wrong order
• D. Styling for those items will fail

Answer: (C)

Keys give React a stable identity for each item in a list, so it can correctly match up items between renders. When you omit keys, React can’t reliably tell which item is which as the list changes. As a result, when items are reordered, added, or removed, React may reuse DOM nodes inappropriately, which can cause items to appear in the wrong order or show the wrong content after updates. In development you’ll typically see a warning to add a unique key prop to each item. The right fix is to provide stable, unique keys (for example, an item ID) rather than relying on array indices, and the missing-key warning will go away.

Keys give React a stable identity for each item in a list, so it can correctly match up items between renders. When you omit keys, React can’t reliably tell which item is which as the list changes. As a result, when items are reordered, added, or removed, React may reuse DOM nodes inappropriately, which can cause items to appear in the wrong order or show the wrong content after updates. In development you’ll typically see a warning to add a unique key prop to each item. The right fix is to provide stable, unique keys (for example, an item ID) rather than relying on array indices, and the missing-key warning will go away.