What is the purpose of keys in a list in React?

What is the purpose of keys in a list in React?

• A. To apply CSS styles
• B. To store event handlers
• C. To initialize the list order
• D. To uniquely identify items to help React track changes

Answer: (D)

Keys uniquely identify each item in a rendered list so React can track changes efficiently. When React reconciles the UI, it uses these keys to match old elements with new ones, letting it know which items were added, removed, or moved. This enables updating only the necessary parts of the DOM and helps preserve component state for each item. The best practice is to use stable, unique identifiers from your data, such as item.id, rather than the array index. Using the index as a key can cause problems when the list changes order or items are inserted, because React may mis-associate state with the wrong item. Remember, keys are a mechanism for React’s internal tracking and aren’t used for styling, storing event handlers, or initializing the list order, and they aren’t passed as props to the component.

Keys uniquely identify each item in a rendered list so React can track changes efficiently. When React reconciles the UI, it uses these keys to match old elements with new ones, letting it know which items were added, removed, or moved. This enables updating only the necessary parts of the DOM and helps preserve component state for each item. The best practice is to use stable, unique identifiers from your data, such as item.id, rather than the array index. Using the index as a key can cause problems when the list changes order or items are inserted, because React may mis-associate state with the wrong item. Remember, keys are a mechanism for React’s internal tracking and aren’t used for styling, storing event handlers, or initializing the list order, and they aren’t passed as props to the component.