Good list rendering in [React](/courses/reactjs) mainly requires clear array transformations and keys that accurately represent each item's identity. ### 1. Use map() to Render Data Collections ```jsx {articles.map((article) => ( ))} ``` This keeps the relationship between data and UI easy to understand. ### 2. Prefer Stable IDs Best: ```jsx key={article.id} ``` A database or application ID usually continues to identify the same record even after sorting or filtering. ### 3. Use Stable Unique Values When IDs Are Unavailable A permanent unique slug may also work: ```jsx key={article.slug} ``` provided it does not unexpectedly change. ### 4. Avoid Random Keys Do not use: ```jsx key={Math.random()} ``` or: ```jsx key={Date.now()} ``` These values change, causing [React](/courses/reactjs) to lose stable identity and potentially recreate components unnecessarily. ### 5. Avoid Index Keys for Dynamic Lists Avoid: ```jsx key={index} ``` when users can: ```text Add items Delete items Sort items Filter items Reorder items Edit stateful rows ``` Stable IDs are safer. ### 6. Keep the Key on the Element Returned by map() Correct: ```jsx {users.map((user) => ( ))} ``` If rendering a fragment containing several elements, the keyed fragment should represent the list item. ```jsx import { Fragment } from "react"; {users.map((user) => (

{user.name}

{user.email}

))} ``` ### 7. Do Not Expect key to Be a Normal Prop This: ```jsx ``` does not mean `UserCard` receives `key` as a normal application prop. Pass the value separately when the component needs it: ```jsx ``` ### 8. Think About Identity, Not Position The most useful question when selecting a key is: ```text If this item moves somewhere else in the array, what value still tells me it is the same item? ``` For database records, that answer is usually the record ID. ### Practical Mental Model ```text Array data ↓ map to JSX ↓ identify every sibling item ↓ use stable data key ↓ React can preserve correct identity ``` ### Interview-Ready Answer When rendering React lists, use `map()` to transform data into JSX and give every sibling item a stable key based on its real identity. Prefer database IDs or stable unique values, avoid random keys, and avoid array indexes for dynamic lists. Good keys help React preserve the correct component and state as items are inserted, removed, reordered, or filtered.