What are keys in React?

Keys in React are special string attributes used to uniquely identify elements in a list. They help React efficiently update, insert, or remove items during re-rendering by tracking which items have changed.

1. Improve Performance ⚡

   • Keys allow React to diff elements faster by comparing keys between old and new virtual DOM trees.
   • Without keys, React re-renders all list items instead of just the ones that changed.

2. Must Be Unique Among Siblings 🧩

   • Keys should be unique within the same list.
   • A stable and unique identifier (like id from the database) is ideal.

3. Avoid Using Index as Key (Unless Static) 🚫

   • Using an array index as a key is discouraged when the list can change (e.g., add/remove/reorder items).
   • It can lead to incorrect component state and inefficient rendering.

4. Helps Maintain Component State 🧠

   • React uses keys to preserve component instances between re-renders.
   • Without proper keys, stateful child components may reset or behave unexpectedly.