Many React developers misunderstand the key prop, believing it improves performance by preventing re-renders. However, its true purpose is defining component identity during reconciliation. When types differ, React unmounts and remounts components, losing state. When types match, it re-renders the existing component, preserving state but potentially causing unexpected behavior.

The core problem arises in conditional rendering and dynamic lists. Using array indexes as keys is a common pitfall. When an item is added or removed, React may incorrectly reuse DOM nodes, causing inputs to display wrong values. The solution is a stable, unique identifier for each list item, ensuring React correctly matches elements to their data.

For conditional components of the same type, passing a changing key forces a remount, which resets internal state. This is a useful pattern for clearing form inputs when toggling views. The key prop isn't a performance optimization; it's a reconciliation instruction that tells React whether to reuse or recreate a component instance.