key

A special prop that helps React identify which items changed, added, or removed.

• Used only when rendering lists
• Used internally by React and not accessible inside the component.
  • NOT Passed as a Prop.
• Must be unique among siblings
• Helps React optimize re-rendering

Reconciliation to update the UI, with keys:

• React compares items by identity
  • Else, will compare by position
  • May cause unnecessary re-renders
• Updates only what changed

React: id=1 → Apple
       id=2 → Banana
       id=3 → Orange

map()

To render JSX lists

• Transform each item in an array
• Become an array of JSX elements
  • // forEach() returns undefined (❌ Cannot render JSX)