A good [React](/courses/reactjs) key uniquely identifies an item among its siblings and remains stable for that same item over time. The best key usually comes from the data itself. ### Good Example with Database IDs ```jsx const articles = [ { id: "a101", title: "React Hooks" }, { id: "a102", title: "React Props" }, { id: "a103", title: "React State" } ]; function ArticleList() { return articles.map((article) => ( )); } ``` The IDs remain connected to the same articles even if the array is reordered. ### What Does Stable Mean? Suppose: ```text Render 1 article a101 → React Hooks Render 2 article a101 → React Hooks ``` The key remains: ```text a101 ``` [React](/courses/reactjs) can therefore recognize the same item. ### Keys Only Need to Be Unique Among Siblings You do not need one globally unique key across your entire React application. This is valid: ```jsx

React
JavaScript

Frontend
Backend

``` Each list has its own sibling group. ### Can a Slug Be a Key? Yes, if it is unique and stable for that list: ```jsx key={article.slug} ``` For example: ```text react-hooks react-props react-state ``` can work well if those slugs do not change unexpectedly. ### Bad Key: Random Value Avoid: ```jsx key={Math.random()} ``` Every render generates another key. React then sees: ```text old item disappeared new item appeared ``` rather than recognizing the existing component. That can cause unnecessary remounting and loss of component state. ### Bad Key: Frequently Changing Value Avoid using values unrelated to the item's identity: ```jsx key={`${item.id}-${Date.now()}`} ``` Although technically unique, it is not stable. ### Practical Key Priority A useful preference order is: ```text Stable database ID ↓ Stable application-generated ID ↓ Stable unique slug/code ↓ Index only when the list is truly static ``` ### Interview-Ready Answer A good React key is unique among sibling items and stable across renders. Database IDs, stable application IDs, or immutable slugs are usually good choices because they remain associated with the same data item even when the list is sorted, filtered, inserted into, or reordered.