React uses the
key prop to keep track of items that have been changed, added, or removed from a list. Keys help your application’s performance1. Also, keys should be unique.
Let’s say we have an array of
post objects. Each post has a unique
slug (like how the post you’re currently reading uses the slug “react-keys” in its URL), a title, and some body information.
To update the UI, React renders a new element tree inside the virtual DOM and compares it against the previous one. Keys help React move faster through the process of looking at lists to see if they’ve updated. ↩︎