What are React keys and why are they important?

Keys are special props that help React identify which items in a list have changed, been added, or removed. When rendering a list of elements, React uses keys to match children across renders. Without keys (or with index as key), React uses element position — reordering the list causes React to think all elements changed, resulting in wasteful re-renders and, for stateful components, incorrect state preservation. items.map(item => <Item key={item.id} {...item} />). Key rules: keys must be unique among siblings (not globally); keys must be stable (not change between renders); keys must be predictable. Why not use array index as key: if the list can be reordered, filtered, or items can be deleted, using index means keys change — React destroys and recreates components instead of reordering them. Use a stable, unique identifier from your data (like a database ID). Keys are NOT accessible as props inside the component — they are a hint to React's reconciliation algorithm, not a data prop. If you need the ID value, pass it as a separate prop.