Explain what reconciliation is and how keys help.

React basics · Experienced

Model answer

Reconciliation is how React decides what to update when a component re-renders: it compares the new element tree with the old one. Elements of the same type at the same position are updated, and different types are replaced. For lists, React uses keys to match items between renders.

Stable unique keys let React keep each item's state and DOM when items are reordered, added or removed. Using the array index as key can cause wrong state or flicker when the list changes order.

Learn this topic

What Is React? Why Use It and How It Works in the course React.js Full Course: Beginner to Advanced.

Sign in to add your own answer.

More questions