How to Optimize React Performance using Keys
How to utilize the Virtual DOM efficiently when rendering lists.
Understand the Virtual DOM diffing
When state changes, React compares the new Virtual DOM tree against the old one. If it sees differences, it updates the real DOM. Comparing massive lists is expensive.
Render a List using Map
Use the Array.map() function inside your JSX to iterate over an array of data and return a component for each item.
Identify the Unique Identifier
Look at your data payload and identify a property that is guaranteed to be unique for every single item (e.g., a database ID, UUID, or SKU).
Apply the Key Prop
Add the 'key' attribute to the top-most HTML element returned inside the map function. Assign the unique identifier to it: <li key={item.id}>.
Avoid Using Array Index
Do not use the map's 'index' variable as the key if the list can be reordered, filtered, or prepended to. Using indices will confuse the diffing algorithm and cause UI bugs.
Observe the Performance Gain
By using stable keys, when a new item is added to the top of the list, React knows the other items haven't changed. It simply inserts the new DOM node without re-rendering the entire list.
Ready to master this completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
