15/365: Lists and Keys

Today in the Meta Frontend Course I learned about how to properly render lists in React. In React, items in a list of components should be given a unique key property. Why is this? The answer lies with how React creates a virtual DOM and compares it to the browser DOM. Whenever a re-render is triggered, React compares the virtual DOM to the browser DOM and changes as few things as possible in order to render the proper HTML. This is done to make the app fast and slick, and the comparison is done through what is known as the "diffing algorithm". By giving each component within the list a unique key, React can quickly compare the virtual and browser DOMs and execute the render efficiently. Without keys, list items will fall victim to unexpected behavior on a re-render.