What is the purpose of the key attribute in a React list?

What is the purpose of the key attribute in a React list?

• A. A unique identifier for each element to help React optimize re-rendering
• B. An index in the array used for ordering
• C. A CSS class name
• D. The element's inner text

Answer: (A)

Keys provide a stable, unique identity for each item in a React list. They let React quickly determine which items have changed, been added, or removed between renders, so it can reuse existing elements and preserve state where appropriate. Using a distinct id from your data as the key is a common and reliable approach. Avoid using the array index as a key if the list can reorder or items can be inserted or deleted, as that can lead to mismatches and UI glitches. The key isn’t a CSS class or the element’s text; it’s the stable identity React uses to reconcile the list efficiently.

Keys provide a stable, unique identity for each item in a React list. They let React quickly determine which items have changed, been added, or removed between renders, so it can reuse existing elements and preserve state where appropriate. Using a distinct id from your data as the key is a common and reliable approach. Avoid using the array index as a key if the list can reorder or items can be inserted or deleted, as that can lead to mismatches and UI glitches. The key isn’t a CSS class or the element’s text; it’s the stable identity React uses to reconcile the list efficiently.