> ## Documentation Index
> Fetch the complete documentation index at: https://docs.anujpandey.in/llms.txt
> Use this file to discover all available pages before exploring further.

# Lists & keys

# 📘 React Theory: Lists & Keys

***

## 1. Introduction

### 🔹 What are Lists & Keys?

In React, **lists** refer to rendering multiple elements dynamically using arrays of data.

**Keys** are special attributes used by React to uniquely identify each element in a list.

```jsx theme={null}
const items = ['Apple', 'Banana', 'Cherry'];

function ListExample() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```

***

### 🔹 Why is it important in React?

* React needs to **efficiently update the UI**
* Lists are **everywhere**:

  * Feeds
  * Tables
  * Comments
  * Notifications
* Keys help React:

  * Identify changes
  * Avoid unnecessary re-renders
  * Preserve component state

***

### 🔹 When and why we use it?

Use lists when:

* Rendering dynamic collections (API data, arrays)
* Creating reusable UI patterns
* Managing repeated UI elements

Use keys when:

* Rendering lists (`map`, loops)
* React needs to track item identity across renders

***

## 2. Concepts / Internal Workings

***

### 🔹 Core Concept: Reconciliation

React uses a process called **reconciliation** to update the DOM efficiently.

👉 When a list changes, React:

1. Compares previous Virtual DOM with the new one
2. Identifies differences
3. Updates only changed elements

***

### 🔹 Role of Keys in Reconciliation

Keys help React answer:

> “Which item changed, got added, or removed?”

Without keys:

* React relies on **index-based comparison**
* Leads to incorrect updates and bugs

With keys:

* React performs **stable identity matching**

***

### 🔹 How it works internally

#### Case 1: Without keys

```jsx theme={null}
['A', 'B', 'C'] → ['B', 'C', 'D']
```

React assumes:

* A → B
* B → C
* C → D

❌ Wrong mapping → unnecessary re-renders

***

#### Case 2: With keys

```jsx theme={null}
[{id:1,A}, {id:2,B}, {id:3,C}]
→
[{id:2,B}, {id:3,C}, {id:4,D}]
```

React:

* Matches by `id`
* Removes A
* Adds D
* Keeps B, C intact

✅ Efficient updates

***

### 🔹 Relationship with other React features

#### 1. State Preservation

Keys determine whether component state is preserved:

```jsx theme={null}
{items.map(item => (
  <Input key={item.id} />
))}
```

* Same key → state preserved
* Different key → component remounts

***

#### 2. Component Identity

Keys define:

* Component lifecycle
* Whether React reuses or recreates components

***

#### 3. Rendering Optimization

Keys help React:

* Skip unnecessary DOM operations
* Improve performance in large lists

***

## 3. Syntax & Examples

***

### 🔹 Basic List Rendering

```jsx theme={null}
const users = ['John', 'Jane', 'Alex'];

function UserList() {
  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}
```

***

### 🔹 Using Unique IDs (Recommended)

```jsx theme={null}
const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
];

function UserList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
```

***

### 🔹 Rendering Components in Lists

```jsx theme={null}
function User({ name }) {
  return <li>{name}</li>;
}

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <User key={user.id} name={user.name} />
      ))}
    </ul>
  );
}
```

***

### 🔹 Nested Lists

```jsx theme={null}
const categories = [
  {
    id: 1,
    name: 'Fruits',
    items: ['Apple', 'Banana']
  }
];

function CategoryList() {
  return (
    <div>
      {categories.map(category => (
        <div key={category.id}>
          <h3>{category.name}</h3>
          <ul>
            {category.items.map((item, index) => (
              <li key={index}>{item}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}
```

***

### 🔹 Conditional Rendering in Lists

```jsx theme={null}
{users.map(user => (
  user.isActive ? <li key={user.id}>{user.name}</li> : null
))}
```

***

### 🔹 Filtering + Mapping

```jsx theme={null}
{users
  .filter(user => user.isActive)
  .map(user => (
    <li key={user.id}>{user.name}</li>
))}
```

***

### 🔹 Fragment with Keys

```jsx theme={null}
import { Fragment } from 'react';

{items.map(item => (
  <Fragment key={item.id}>
    <h2>{item.title}</h2>
    <p>{item.description}</p>
  </Fragment>
))}
```

***

## 4. Edge Cases / Common Mistakes

***

### ❌ 1. Using Index as Key (Dangerous)

```jsx theme={null}
<li key={index}>{item}</li>
```

#### Problem:

* Breaks when:

  * Reordering
  * Insertion/deletion
* Causes:

  * UI bugs
  * State mismatch

***

### ❌ 2. Missing Keys

```jsx theme={null}
{items.map(item => <li>{item}</li>)}
```

React warning:

> “Each child in a list should have a unique 'key' prop”

***

### ❌ 3. Non-Unique Keys

```jsx theme={null}
<li key="item">{item}</li>
```

#### Problem:

* All keys are identical
* React can't differentiate elements

***

### ❌ 4. Key on Wrong Element

```jsx theme={null}
function Item({ item }) {
  return <li>{item.name}</li>;
}

{items.map(item => (
  <Item item={item} /> // ❌ missing key here
))}
```

✔ Fix:

```jsx theme={null}
{items.map(item => (
  <Item key={item.id} item={item} />
))}
```

***

### ❌ 5. Changing Keys Dynamically

```jsx theme={null}
<li key={Math.random()}>{item}</li>
```

#### Problem:

* Forces full re-render every time
* Destroys component state

***

### ❌ 6. Mutating List Instead of Creating New

```jsx theme={null}
items.push(newItem); // ❌ mutation
```

#### Problem:

* React may not detect changes correctly

✔ Use immutable updates:

```jsx theme={null}
setItems([...items, newItem]);
```

***

## 5. Best Practices

***

### ✅ 1. Always Use Stable Unique Keys

Best sources:

* Database IDs
* UUIDs
* Stable unique values

```jsx theme={null}
key={user.id}
```

***

### ✅ 2. Avoid Index as Key (Except Safe Cases)

Safe only when:

* Static list
* No reordering
* No filtering

***

### ✅ 3. Keep Keys at the Correct Level

Keys should be:

* On the **directly mapped element**
* Not inside child components

***

### ✅ 4. Use Memoization for Large Lists

Combine with:

* `React.memo`
* `useMemo`

```jsx theme={null}
const MemoItem = React.memo(Item);
```

***

### ✅ 5. Normalize Data Structure

Ensure:

* Each item has a unique identifier
* Avoid deeply nested unstable structures

***

### ✅ 6. Virtualize Large Lists

For performance:

* Use libraries like:

  * `react-window`
  * `react-virtualized`

***

### ✅ 7. Avoid Recreating Arrays Unnecessarily

```jsx theme={null}
// ❌ Bad
const list = items.map(...);

// ✔ Better (if expensive)
const list = useMemo(() => items.map(...), [items]);
```

***

### ✅ 8. Maintain Predictable Ordering

Stable ordering helps React:

* Optimize diffing
* Avoid unnecessary DOM updates

***

## 🧠 Summary

* Lists render dynamic collections
* Keys provide **identity to elements**
* React uses keys during **reconciliation**
* Wrong keys → bugs + performance issues
* Correct keys → efficient updates + stable UI

***

Below is a **senior-level, high-depth interview set** on **React Lists & Keys**.
Each question is designed to test **internal understanding, trade-offs, and real-world thinking**—not memorization.

***

# 🧠 Advanced React Interview: Lists & Keys

***

## 1. Why does React need keys if it already compares Virtual DOM trees?

### ✅ Strong Answer

React’s reconciliation is **heuristic-based (O(n))**, not a full tree diff (which would be O(n³)). Keys are a **hint to optimize diffing**.

Without keys:

* React compares elements **by position**
* Leads to incorrect assumptions when order changes

With keys:

* React builds a **map of previous children**
* Matches nodes by `key` → preserves identity

```jsx theme={null}
// With keys → stable identity
items.map(item => <Item key={item.id} />)
```

👉 **Why it matters**:

* Avoids unnecessary DOM operations
* Preserves component state correctly

***

## 2. What actually happens internally when keys are missing?

### ✅ Strong Answer

React falls back to **index-based reconciliation**.

Example:

```jsx theme={null}
['A', 'B', 'C'] → ['B', 'C', 'D']
```

React assumes:

* A → B
* B → C
* C → D

👉 Result:

* All elements are updated instead of reused
* Causes:

  * Unnecessary re-renders
  * State bugs

👉 Internally:

* React iterates both lists in order
* No identity tracking → positional diff

***

## 3. Why is using array index as a key considered dangerous?

### ✅ Strong Answer

Because index represents **position, not identity**.

If list changes:

* Insert/delete/reorder → indices shift
* React reuses wrong components

```jsx theme={null}
// Problematic
items.map((item, index) => <Item key={index} />)
```

👉 Real bug:

* Input fields swap values when list reorders

👉 Safe only when:

* List is static
* No reordering/filtering

***

## 4. How do keys affect component state preservation?

### ✅ Strong Answer

React uses keys to determine whether a component is:

* **Same instance (preserve state)**
* **New instance (reset state)**

```jsx theme={null}
{show ? <Input key="A" /> : <Input key="B" />}
```

👉 Different keys → React unmounts + remounts

👉 Same key:

```jsx theme={null}
<Input key="same" />
```

* State persists across renders

👉 Insight:
Keys control **component identity**, not just list rendering

***

## 5. Explain how React handles reordering with and without keys

### ✅ Strong Answer

#### Without keys:

* React compares positionally
* Treats reorder as full replacement

#### With keys:

* React detects movement

```jsx theme={null}
// Before
[{id:1}, {id:2}]

// After (reordered)
[{id:2}, {id:1}]
```

React:

* Matches by `id`
* Moves DOM nodes instead of recreating

👉 Benefit:

* Minimal DOM operations
* Preserves state

***

## 6. Why should keys be stable across renders?

### ✅ Strong Answer

Keys must remain consistent between renders.

Bad example:

```jsx theme={null}
<li key={Math.random()}>{item}</li>
```

👉 Problem:

* Every render → new key
* React treats all elements as new

👉 Effects:

* Full remount
* State loss
* Performance degradation

👉 Rule:
Keys must represent **stable identity over time**

***

## 7. What happens if two elements share the same key?

### ✅ Strong Answer

React cannot differentiate elements.

```jsx theme={null}
<li key="same">A</li>
<li key="same">B</li>
```

👉 Result:

* Unpredictable behavior
* Incorrect DOM updates

👉 Internally:

* Key collision breaks lookup map

👉 Rule:
Keys must be **unique among siblings**

***

## 8. Why are keys only required among siblings and not globally?

### ✅ Strong Answer

React’s reconciliation operates **per parent level**, not globally.

```jsx theme={null}
<ul>
  {list1.map(i => <li key={i.id} />)}
</ul>

<ul>
  {list2.map(i => <li key={i.id} />)}
</ul>
```

👉 Same keys are fine across different parents

👉 Reason:

* Each parent maintains its own child map

***

## 9. Why should the key be placed on the mapped element, not inside the child?

### ✅ Strong Answer

React needs keys **at the point of array creation**, not inside components.

```jsx theme={null}
// ❌ Wrong
<Item item={item} /> // missing key

// ✔ Correct
<Item key={item.id} item={item} />
```

👉 Why:

* Reconciliation happens at parent level
* Child component has no control over identity

***

## 10. How do keys interact with React.memo and performance optimization?

### ✅ Strong Answer

Keys determine **whether React reuses a component instance**.

`React.memo` works only if:

* Same component instance is reused
* Props comparison happens

👉 If key changes:

```jsx theme={null}
<Item key={newKey} />
```

* React remounts → memoization useless

👉 Insight:
Keys can **invalidate memoization**

***

## 11. What is the relationship between keys and controlled inputs?

### ✅ Strong Answer

Wrong keys can cause input state bugs.

Example:

```jsx theme={null}
items.map((item, index) => (
  <input key={index} value={item.value} />
))
```

👉 If list reorders:

* Inputs get mismatched values

👉 Fix:

```jsx theme={null}
key={item.id}
```

👉 Why:

* Ensures correct mapping of state to DOM

***

## 12. Can keys be used intentionally to force remounting?

### ✅ Strong Answer

Yes — this is an advanced pattern.

```jsx theme={null}
<Component key={userId} />
```

👉 When `userId` changes:

* Component resets completely

👉 Use cases:

* Reset form state
* Restart animations

👉 Trade-off:

* Expensive → full remount

***

## 13. How does React handle insertion in the middle of a list?

### ✅ Strong Answer

With proper keys:

* React detects new item
* Shifts others efficiently

Without keys:

* All subsequent elements are re-rendered

```jsx theme={null}
// Insert at index 1
[A, B, C] → [A, X, B, C]
```

👉 With keys:

* Only X is added

👉 Without keys:

* B → X
* C → B
* New C created

***

## 14. Why are keys critical in dynamic UIs like drag-and-drop?

### ✅ Strong Answer

Drag-and-drop involves:

* Reordering
* Frequent updates

👉 Without stable keys:

* UI glitches
* State corruption

👉 With keys:

* React correctly tracks moved items

👉 Real-world:

* Trello boards
* Kanban systems

***

## 15. How do keys behave in nested lists?

### ✅ Strong Answer

Keys must be unique **within each level**.

```jsx theme={null}
categories.map(cat => (
  <div key={cat.id}>
    {cat.items.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </div>
))
```

👉 Each map needs its own keys

***

## 16. What are the trade-offs between using UUIDs vs database IDs as keys?

### ✅ Strong Answer

| Option                | Pros               | Cons              |
| --------------------- | ------------------ | ----------------- |
| DB ID                 | Stable, consistent | Requires backend  |
| UUID (generated once) | Unique             | Must persist      |
| Random per render     | None               | Breaks everything |

👉 Rule:

* Key must not change across renders

***

## 17. How does React’s diffing algorithm use keys for performance?

### ✅ Strong Answer

React:

1. Creates map of old children (key → node)
2. Iterates new children
3. Matches using keys

👉 Complexity:

* O(n) instead of O(n³)

👉 Without keys:

* Falls back to naive comparison

***

## 18. When is it actually acceptable to use index as a key?

### ✅ Strong Answer

Only when:

* List is static
* No insertions/deletions/reordering
* No stateful children

Example:

```jsx theme={null}
['Mon', 'Tue', 'Wed'].map((day, i) => (
  <li key={i}>{day}</li>
))
```

👉 Even then:

* Prefer stable IDs if possible

***

## 🧠 Final Takeaways

* Keys are not just for lists → they define **component identity**
* Bad keys → subtle bugs + performance issues
* Good keys → efficient reconciliation + stable UI
* Senior engineers treat keys as:

  > “Identity layer for UI, not just syntax requirement”

***

Below is a **senior-level MCQ set (18 questions)** on **React Lists & Keys**.
Each question is designed to test **deep understanding, internal behavior, and edge cases**—not surface-level knowledge.

***

# 🧠 Advanced MCQs: React Lists & Keys

***

## **1. What is the primary role of `key` in React’s reconciliation?**

A. Improve rendering speed by skipping Virtual DOM
B. Help React identify which items have changed
C. Prevent re-rendering of child components
D. Ensure components receive correct props

✅ **Correct Answer: B**

### ✔ Explanation:

Keys allow React to **track element identity across renders**, enabling efficient diffing.

### ❌ Why others are wrong:

* A: React still uses Virtual DOM
* C: Keys don’t prevent re-renders directly
* D: Props flow is independent of keys

***

## **2. What happens when keys are not provided in a dynamic list?**

A. React throws a runtime error
B. React uses random keys internally
C. React falls back to index-based comparison
D. React skips rendering the list

✅ **Correct Answer: C**

### ✔ Explanation:

React defaults to **index-based reconciliation**, which can lead to incorrect updates.

### ❌ Others:

* A: Only warning, not error
* B: No random keys
* D: Rendering still happens

***

## **3. Given this code, what is the biggest risk?**

```jsx theme={null}
items.map((item, index) => <Input key={index} value={item.value} />)
```

A. Performance degradation
B. Incorrect event handling
C. State mismatch when reordering
D. Duplicate DOM nodes

✅ **Correct Answer: C**

### ✔ Explanation:

Using index as key can cause **input values to swap incorrectly** when list order changes.

### ❌ Others:

* A: Not the main issue
* B: Events still work
* D: No duplication occurs

***

## **4. Which scenario is SAFE for using index as key?**

A. Infinite scrolling list
B. List with drag-and-drop
C. Static list with no changes
D. Filterable search results

✅ **Correct Answer: C**

### ✔ Explanation:

Index is safe only when **list order and content never change**.

### ❌ Others:

* A/B/D: All involve dynamic changes

***

## **5. What happens when keys change between renders?**

A. React reuses components
B. React skips diffing
C. React remounts components
D. React merges states

✅ **Correct Answer: C**

### ✔ Explanation:

Changing keys forces React to treat elements as **completely new → remount**

***

## **6. What is the issue with this code?**

```jsx theme={null}
<li key={Math.random()}>{item}</li>
```

A. Duplicate keys
B. Keys not unique
C. Keys unstable across renders
D. Keys not strings

✅ **Correct Answer: C**

### ✔ Explanation:

Keys must be **stable**, not random—otherwise React remounts every time.

***

## **7. What happens if two siblings share the same key?**

A. React throws an error
B. React ignores duplicates
C. React behaves unpredictably
D. React merges the elements

✅ **Correct Answer: C**

### ✔ Explanation:

Duplicate keys break React’s ability to track elements → **undefined behavior**

***

## **8. Where should the key be placed?**

A. Inside child component
B. On parent container
C. On the element returned from map
D. Anywhere in JSX

✅ **Correct Answer: C**

### ✔ Explanation:

Keys must exist at the **array mapping level** for reconciliation.

***

## **9. What happens during reordering with proper keys?**

A. React deletes all nodes and recreates
B. React moves DOM nodes efficiently
C. React ignores the change
D. React re-renders only parent

✅ **Correct Answer: B**

### ✔ Explanation:

React identifies moved items and **reuses DOM nodes**

***

## **10. Why are keys only required among siblings?**

A. Global uniqueness is enforced internally
B. React tracks elements per parent
C. Keys are hashed globally
D. React ignores nested lists

✅ **Correct Answer: B**

### ✔ Explanation:

Each parent maintains its own **child reconciliation context**

***

## **11. What is the effect of keys on `React.memo`?**

A. Keys enhance memoization
B. Keys are ignored by memo
C. Changing keys invalidates memoization
D. Memo replaces keys

✅ **Correct Answer: C**

### ✔ Explanation:

New key → new component → memo useless

***

## **12. Consider:**

```jsx theme={null}
{items.map(item => <Item key={item.id} />)}
```

What happens if `item.id` changes every render?

A. Efficient diffing
B. Component reuse
C. Full remount every render
D. No effect

✅ **Correct Answer: C**

### ✔ Explanation:

Unstable IDs = new identity each time → remount

***

## **13. What problem occurs in this scenario?**

```jsx theme={null}
items.unshift(newItem);
```

A. Syntax error
B. React crash
C. Mutation causing incorrect diff
D. Key duplication

✅ **Correct Answer: C**

### ✔ Explanation:

Mutating array can break predictable updates and reconciliation

***

## **14. Why is this problematic?**

```jsx theme={null}
items.map(item => <Item key="static" />)
```

A. Performance issue
B. Duplicate keys
C. Missing props
D. Infinite loop

✅ **Correct Answer: B**

### ✔ Explanation:

All elements share same key → React cannot differentiate

***

## **15. What does React do internally with keys during diffing?**

A. Sorts elements alphabetically
B. Builds a key-to-element map
C. Converts keys to indices
D. Ignores keys for performance

✅ **Correct Answer: B**

### ✔ Explanation:

React creates a **lookup map** for efficient matching

***

## **16. Which case leads to subtle UI bugs?**

A. Stable keys with static list
B. Index keys with filtered list
C. Unique keys with memo
D. Keys on fragments

✅ **Correct Answer: B**

### ✔ Explanation:

Filtering changes indices → mismatched UI/state

***

## **17. What is a valid use of keys outside lists?**

A. Styling components
B. Triggering remount intentionally
C. Passing props
D. Event handling

✅ **Correct Answer: B**

### ✔ Explanation:

Keys can force remount:

```jsx theme={null}
<Component key={userId} />
```

***

## **18. What happens when inserting an item in the middle WITHOUT keys?**

A. Only new item renders
B. All subsequent items re-render incorrectly
C. No changes detected
D. React crashes

✅ **Correct Answer: B**

### ✔ Explanation:

React shifts all items → inefficient + potential bugs

***

# 🧠 Final Insight

Senior engineers understand:

* Keys = **identity system**, not syntax
* Bad keys → **state corruption + subtle bugs**
* Good keys → **predictable UI + performance**

***

Below is a **senior-level coding problem set (18 problems)** focused on **React Lists & Keys**.
These simulate **real-world scenarios**, emphasize **reasoning**, and expose **edge cases + internal behavior**.

***

# 🧠 Advanced Coding Problems: React Lists & Keys

***

## **1. Reorderable Todo List (Drag & Drop Bug)**

### 🧩 Problem

You have a draggable todo list. After reordering, input values get mixed between items.

### ⚙️ Constraints

* Each todo has `{ id, text }`
* Items can be reordered arbitrarily
* Inputs are controlled

### 🎯 Expected Behavior

* Reordering should preserve correct input values

### ❗ Edge Cases

* Rapid reordering
* Editing while dragging

***

### 💡 Solution Explanation

❌ Bug:

```jsx theme={null}
todos.map((todo, index) => (
  <input key={index} value={todo.text} />
))
```

✔ Fix:

```jsx theme={null}
todos.map(todo => (
  <input key={todo.id} value={todo.text} />
))
```

### 🧠 Why

Index breaks identity → React reuses wrong components

***

## **2. Editable Table with Row Insertions**

### 🧩 Problem

Insert a row in the middle of a table without resetting existing row states.

### ⚙️ Constraints

* Rows contain form inputs
* Insert anywhere

### 🎯 Expected

* Existing rows keep their values

***

### 💡 Solution

```jsx theme={null}
rows.map(row => (
  <Row key={row.id} data={row} />
))
```

### 🧠 Why

Stable keys prevent state shift

***

## **3. Chat Messages with Auto-Append**

### 🧩 Problem

New messages appear at the bottom, but scroll position jumps.

### ⚙️ Constraints

* Real-time updates
* Large list

### 🎯 Expected

* Smooth append without re-rendering entire list

***

### 💡 Solution

* Use stable keys (`message.id`)
* Avoid recreating entire array

```jsx theme={null}
setMessages(prev => [...prev, newMessage])
```

### 🧠 Why

Preserves DOM nodes → prevents scroll reset

***

## **4. Infinite Scroll Feed**

### 🧩 Problem

Older items are prepended when scrolling up, but UI flickers.

### ⚙️ Constraints

* Thousands of items
* Prepend data

***

### 💡 Solution

```jsx theme={null}
setItems(prev => [...newItems, ...prev])
```

Ensure:

```jsx theme={null}
key={item.id}
```

### 🧠 Why

Index keys would shift entire list

***

## **5. Filterable List with Checkboxes**

### 🧩 Problem

Checkbox selections get mixed after filtering.

***

### 💡 Solution

```jsx theme={null}
items
  .filter(...)
  .map(item => (
    <Checkbox key={item.id} checked={item.checked} />
  ))
```

### 🧠 Why

Index keys break mapping after filter

***

## **6. Dynamic Form Builder**

### 🧩 Problem

Fields can be added/removed dynamically. Values reset unexpectedly.

***

### 💡 Solution

```jsx theme={null}
fields.map(field => (
  <Input key={field.id} value={field.value} />
))
```

### 🧠 Why

Stable keys preserve component state

***

## **7. Animated List (Framer Motion)**

### 🧩 Problem

Animations glitch when items are reordered.

***

### 💡 Solution

* Use stable keys
* Avoid index keys

```jsx theme={null}
<motion.div key={item.id} />
```

### 🧠 Why

Animation libraries depend on correct identity

***

## **8. Virtualized List (Performance Issue)**

### 🧩 Problem

Rendering 10,000 items causes lag.

***

### 💡 Solution

* Use virtualization (`react-window`)
* Ensure stable keys

### 🧠 Why

Reduces DOM nodes + efficient reconciliation

***

## **9. Reset Form on User Change**

### 🧩 Problem

Form should reset when user changes.

***

### 💡 Solution

```jsx theme={null}
<Form key={userId} />
```

### 🧠 Why

Key change forces remount

***

## **10. Nested Comments Tree**

### 🧩 Problem

Render nested comments with replies.

***

### 💡 Solution

```jsx theme={null}
comments.map(comment => (
  <Comment key={comment.id}>
    {comment.replies.map(reply => (
      <Reply key={reply.id} />
    ))}
  </Comment>
))
```

### 🧠 Why

Each level needs unique keys

***

## **11. Sorting a Table**

### 🧩 Problem

Sorting causes row data mismatch.

***

### 💡 Solution

Use:

```jsx theme={null}
key={row.id}
```

### 🧠 Why

Sorting changes order → index fails

***

## **12. Toggle Visibility of List Items**

### 🧩 Problem

Toggling visibility resets component state.

***

### 💡 Solution

Keep keys consistent:

```jsx theme={null}
{visibleItems.map(item => (
  <Item key={item.id} />
))}
```

***

## **13. Pagination System**

### 🧩 Problem

Switching pages causes flicker and state reset.

***

### 💡 Solution

Avoid:

```jsx theme={null}
key={pageNumber}
```

Use:

```jsx theme={null}
key={item.id}
```

***

## **14. Multi-Select List with Reordering**

### 🧩 Problem

Selected items change after reorder.

***

### 💡 Solution

Store selection by ID, not index

***

## **15. Duplicate Items from API**

### 🧩 Problem

API returns duplicate IDs.

***

### 💡 Solution

Generate composite key:

```jsx theme={null}
key={`${item.id}-${index}`}
```

### 🧠 Trade-off

* Works but not ideal
* Prefer fixing backend

***

## **16. List with Conditional Rendering**

### 🧩 Problem

Conditional rendering causes remounts.

***

### 💡 Solution

Avoid:

```jsx theme={null}
{condition && <Item key={item.id} />}
```

Ensure consistent structure

***

## **17. Memoized List Items Not Working**

### 🧩 Problem

`React.memo` not preventing re-renders

***

### 💡 Solution

Check:

* Keys stable?
* Props stable?

***

## **18. Drag-and-Drop Kanban Board**

### 🧩 Problem

Cards lose state when moved between columns.

***

### 💡 Solution

Use stable IDs across columns:

```jsx theme={null}
key={card.id}
```

***

## **19. Replacing Entire List vs Updating**

### 🧩 Problem

Replacing list causes flicker.

***

### 💡 Solution

Avoid:

```jsx theme={null}
setItems(newArray) // if unnecessary
```

Prefer minimal updates

***

## **20. Rendering Fragments in Lists**

### 🧩 Problem

Multiple elements per item without wrapper

***

### 💡 Solution

```jsx theme={null}
<Fragment key={item.id}>
  <h1>{item.title}</h1>
  <p>{item.desc}</p>
</Fragment>
```

***

# 🧠 Final Insight

These problems test whether a developer understands:

* Keys = **identity layer**
* Lists = **dynamic UI modeling**
* Mistakes → **state bugs, not just warnings**

***

Below is a **senior-level debugging challenge set (18 scenarios)** for **React Lists & Keys**.
These mimic **real production bugs**—subtle, non-obvious, and rooted in **React internals + reconciliation behavior**.

***

# 🐞 Advanced Debugging Challenges: Lists & Keys

***

## **1. Input Values Swapping After Reorder**

### 🧩 Buggy Code

```jsx theme={null}
todos.map((todo, index) => (
  <input key={index} value={todo.text} />
))
```

### ❌ What’s Wrong

Input values get swapped when list order changes.

### 🤔 Why It Happens

* `index` is used as key → identity tied to position
* React reuses DOM nodes incorrectly during reorder

***

### ✅ Fixed Code

```jsx theme={null}
todos.map(todo => (
  <input key={todo.id} value={todo.text} />
))
```

### 💡 Best Practice

Use **stable unique identifiers**, never index for dynamic lists

***

## **2. Component State Reset on Every Render**

### 🧩 Buggy Code

```jsx theme={null}
items.map(item => (
  <Item key={Math.random()} data={item} />
))
```

### ❌ What’s Wrong

Component state resets every render

### 🤔 Why

* New key each render → React remounts component

***

### ✅ Fix

```jsx theme={null}
key={item.id}
```

### 💡 Best Practice

Keys must be **stable across renders**

***

## **3. Checkbox Selection Shifts After Filtering**

### 🧩 Buggy Code

```jsx theme={null}
items
  .filter(item => item.active)
  .map((item, index) => (
    <input key={index} type="checkbox" checked={item.checked} />
  ))
```

### ❌ Problem

Checkbox states mismatch after filtering

### 🤔 Why

Filtering changes indices → identity mismatch

***

### ✅ Fix

```jsx theme={null}
key={item.id}
```

### 💡 Best Practice

Never use index when list can be filtered

***

## **4. Duplicate Keys Causing Random UI Bugs**

### 🧩 Buggy Code

```jsx theme={null}
items.map(item => (
  <li key="item">{item.name}</li>
))
```

### ❌ Problem

UI behaves unpredictably

### 🤔 Why

All elements share same key → React cannot track them

***

### ✅ Fix

```jsx theme={null}
key={item.id}
```

### 💡 Best Practice

Keys must be **unique among siblings**

***

## **5. Drag-and-Drop List Losing State**

### 🧩 Buggy Code

```jsx theme={null}
items.map((item, index) => (
  <Card key={index} data={item} />
))
```

### ❌ Problem

Dragging items causes state corruption

### 🤔 Why

Reordering shifts indices → wrong component reuse

***

### ✅ Fix

```jsx theme={null}
key={item.id}
```

### 💡 Best Practice

Drag-and-drop ALWAYS requires stable keys

***

## **6. React.memo Not Working**

### 🧩 Buggy Code

```jsx theme={null}
const MemoItem = React.memo(Item);

items.map(item => (
  <MemoItem key={Date.now()} item={item} />
))
```

### ❌ Problem

Memoization has no effect

### 🤔 Why

New key each render → new component instance

***

### ✅ Fix

```jsx theme={null}
key={item.id}
```

### 💡 Best Practice

Keys must not invalidate memoization

***

## **7. Form Resetting Unexpectedly**

### 🧩 Buggy Code

```jsx theme={null}
<Form key={user.id + Math.random()} />
```

### ❌ Problem

Form resets on every render

### 🤔 Why

Key changes → React remounts component

***

### ✅ Fix

```jsx theme={null}
<Form key={user.id} />
```

### 💡 Best Practice

Use key changes only when you WANT reset

***

## **8. Flickering List on Update**

### 🧩 Buggy Code

```jsx theme={null}
setItems([...newItems]);
```

### ❌ Problem

Entire list re-renders unnecessarily

### 🤔 Why

All references change → reconciliation less efficient

***

### ✅ Fix

* Update only changed items

```jsx theme={null}
setItems(prev => prev.map(...))
```

### 💡 Best Practice

Prefer **minimal updates over full replacement**

***

## **9. Nested List State Mixing**

### 🧩 Buggy Code

```jsx theme={null}
categories.map((cat, i) => (
  <div key={i}>
    {cat.items.map((item, j) => (
      <Item key={j} />
    ))}
  </div>
))
```

### ❌ Problem

Nested items lose correct state

### 🤔 Why

Both levels use index → unstable identity

***

### ✅ Fix

```jsx theme={null}
key={cat.id}
key={item.id}
```

### 💡 Best Practice

Each level must have stable keys

***

## **10. Infinite Scroll Jumping**

### 🧩 Buggy Code

```jsx theme={null}
setItems([...newItems, ...items]);
```

(with index keys)

### ❌ Problem

Scroll jumps unexpectedly

### 🤔 Why

Prepending shifts indices → DOM mismatch

***

### ✅ Fix

Use stable keys:

```jsx theme={null}
key={item.id}
```

***

## **11. Conditional Rendering Breaking State**

### 🧩 Buggy Code

```jsx theme={null}
{items.map(item =>
  item.visible && <Item key={item.id} />
)}
```

### ❌ Problem

Items remount when toggled

### 🤔 Why

Element removed from tree → loses identity

***

### ✅ Fix

```jsx theme={null}
{items.map(item => (
  <Item key={item.id} hidden={!item.visible} />
))}
```

### 💡 Best Practice

Prefer **visibility toggles over mount/unmount**

***

## **12. Incorrect Key Placement**

### 🧩 Buggy Code

```jsx theme={null}
function Item({ item }) {
  return <li key={item.id}>{item.name}</li>;
}

items.map(item => <Item item={item} />);
```

### ❌ Problem

React warning + incorrect diffing

### 🤔 Why

Key must be on mapped element, not inside child

***

### ✅ Fix

```jsx theme={null}
items.map(item => (
  <Item key={item.id} item={item} />
))
```

***

## **13. Duplicate API IDs**

### 🧩 Buggy Code

```jsx theme={null}
key={item.id}
```

(API returns duplicates)

### ❌ Problem

Random UI glitches

### 🤔 Why

Key collision breaks reconciliation

***

### ✅ Fix

```jsx theme={null}
key={`${item.id}-${index}`}
```

### 💡 Best Practice

Fix backend if possible

***

## **14. Re-render Storm in Large List**

### 🧩 Buggy Code

```jsx theme={null}
items.map(item => (
  <Item key={item.id} data={{...item}} />
))
```

### ❌ Problem

All items re-render

### 🤔 Why

New object reference each render

***

### ✅ Fix

```jsx theme={null}
<Item key={item.id} data={item} />
```

### 💡 Best Practice

Avoid unnecessary object recreation

***

## **15. Fragment Without Key**

### 🧩 Buggy Code

```jsx theme={null}
items.map(item => (
  <>
    <h1>{item.title}</h1>
    <p>{item.desc}</p>
  </>
))
```

### ❌ Problem

React warning + unstable rendering

***

### ✅ Fix

```jsx theme={null}
<Fragment key={item.id}>
```

***

## **16. Sorting Causing State Bugs**

### 🧩 Buggy Code

```jsx theme={null}
items.sort(...).map((item, i) => (
  <Item key={i} />
))
```

### ❌ Problem

State mismatch after sorting

### 🤔 Why

Index changes → wrong mapping

***

### ✅ Fix

```jsx theme={null}
key={item.id}
```

***

## **17. List Recreated Every Render**

### 🧩 Buggy Code

```jsx theme={null}
const list = items.map(item => <Item key={item.id} />);
```

(inside parent render with new array each time)

### ❌ Problem

Unnecessary work

***

### ✅ Fix

```jsx theme={null}
const list = useMemo(() => ..., [items]);
```

### 💡 Best Practice

Memoize expensive list rendering

***

## **18. Animation Breaking on List Update**

### 🧩 Buggy Code

```jsx theme={null}
items.map((item, i) => (
  <motion.div key={i} />
))
```

### ❌ Problem

Animations glitch

### 🤔 Why

Incorrect identity → animation resets

***

### ✅ Fix

```jsx theme={null}
key={item.id}
```

***

# 🧠 Final Takeaways

A senior engineer should recognize:

* Keys = **identity contract with React**
* Bugs are often:

  * State mismatches
  * UI inconsistencies
  * Performance regressions
* Most issues stem from:

  > ❌ “Position-based thinking”
  > ✅ “Identity-based thinking”

***

Below is a **senior frontend architect-level machine coding set (18 problems)** on **React Lists & Keys**.
These are **production-grade scenarios** focusing on **identity, reconciliation, performance, and architecture decisions**.

***

# 🏗️ Real-World Machine Coding Problems: Lists & Keys

***

## **1. Twitter-like Feed with Infinite Scroll**

### 📌 Requirements

* Display posts with:

  * Author, content, likes
* Infinite scroll (append new posts)
* New posts can also arrive at top (real-time)

### 🖥️ UI Behavior

* Smooth scrolling
* No flicker when new posts arrive

### 🔄 State/Data Flow

* `posts: Array<Post>`
* Append + prepend updates

### ⚠️ Edge Cases

* Duplicate posts
* Reordering due to ranking algorithm

### ⚡ Performance

* Avoid full list re-render
* Virtualization recommended

### 🏗️ Architecture

* `Feed → PostList → PostItem`
* Normalize data by `id`

### 🧠 Solution Approach

1. Use `post.id` as key
2. Maintain stable ordering
3. Use windowing (`react-window`)
4. Handle prepend carefully to avoid scroll jump

***

## **2. Trello-style Kanban Board**

### 📌 Requirements

* Multiple columns
* Drag cards across columns
* Preserve card state

### 🖥️ UI Behavior

* Smooth drag-and-drop
* State intact after move

### 🔄 State

```js theme={null}
columns = {
  col1: [cardIds],
  col2: [cardIds]
}
```

### ⚠️ Edge Cases

* Rapid drag events
* Duplicate keys across columns

### ⚡ Performance

* Avoid re-rendering entire board

### 🏗️ Architecture

* `Board → Column → Card`

### 🧠 Approach

* Use global `card.id` as key
* Never use index
* Memoize cards

***

## **3. Dynamic Form Builder (Notion-style)**

### 📌 Requirements

* Add/remove/reorder fields
* Multiple input types

### ⚠️ Edge Cases

* Field deletion in middle
* Undo/redo

### ⚡ Performance

* Preserve input state

### 🧠 Approach

* Each field has unique `id`
* Keys tied to field identity
* Immutable updates

***

## **4. Real-time Chat App**

### 📌 Requirements

* Append messages
* Maintain scroll position
* Handle edits/deletes

### ⚠️ Edge Cases

* Message duplication
* Out-of-order messages

### ⚡ Performance

* Virtualization for long chats

### 🧠 Approach

* Key = `message.id`
* Maintain stable order
* Avoid full re-renders

***

## **5. Large Data Table with Sorting + Filtering**

### 📌 Requirements

* Sort columns
* Filter rows
* Editable cells

### ⚠️ Edge Cases

* Sorting resets input state
* Filtering removes items temporarily

### ⚡ Performance

* Thousands of rows

### 🧠 Approach

* Use `row.id` as key
* Store edits separately
* Memoize rows

***

## **6. Nested Comment Thread (Reddit-style)**

### 📌 Requirements

* Infinite nested replies
* Collapse/expand threads

### ⚠️ Edge Cases

* Deep recursion
* Duplicate IDs

### 🧠 Approach

* Recursive component
* Keys per level (`comment.id`)

***

## **7. E-commerce Product Grid with Filters**

### 📌 Requirements

* Filter by category, price
* Add/remove items dynamically

### ⚠️ Edge Cases

* Rapid filter toggling
* Pagination + filtering combined

### 🧠 Approach

* Key = product ID
* Avoid index keys after filtering

***

## **8. Drag-to-Reorder Playlist**

### 📌 Requirements

* Reorder songs
* Persist order

### ⚠️ Edge Cases

* Duplicate songs
* Reordering during playback

### 🧠 Approach

* Stable keys (`song.id`)
* Maintain order array

***

## **9. Calendar Event List**

### 📌 Requirements

* Events grouped by date
* Add/remove dynamically

### ⚠️ Edge Cases

* Same event across dates
* Timezone changes

### 🧠 Approach

* Composite key (`event.id + date`)

***

## **10. Multi-select Dropdown with Search**

### 📌 Requirements

* Select/unselect items
* Filter list

### ⚠️ Edge Cases

* Selected items disappearing after filter

### 🧠 Approach

* Store selection by ID
* Keys tied to item identity

***

## **11. File Explorer (Tree View)**

### 📌 Requirements

* Expand/collapse folders
* Nested structure

### ⚠️ Edge Cases

* Moving files between folders

### 🧠 Approach

* Recursive rendering
* Unique keys per node

***

## **12. Notification System (Grouped)**

### 📌 Requirements

* Group notifications by type
* Real-time updates

### ⚠️ Edge Cases

* Duplicate notifications
* Reordering by priority

### 🧠 Approach

* Stable IDs
* Avoid re-rendering entire group

***

## **13. Infinite Image Gallery (Masonry Layout)**

### 📌 Requirements

* Lazy load images
* Dynamic layout

### ⚠️ Edge Cases

* Image load delays
* Reflow issues

### 🧠 Approach

* Key = image ID
* Avoid layout thrashing

***

## **14. Collaborative Document Editor (Blocks)**

### 📌 Requirements

* Add/remove/reorder blocks
* Real-time updates

### ⚠️ Edge Cases

* Concurrent edits
* Block duplication

### 🧠 Approach

* Block IDs as keys
* CRDT or OT for sync

***

## **15. Survey Builder with Conditional Questions**

### 📌 Requirements

* Show/hide questions dynamically

### ⚠️ Edge Cases

* State loss when hidden

### 🧠 Approach

* Keep components mounted
* Use visibility toggles

***

## **16. Activity Timeline**

### 📌 Requirements

* Events sorted by time
* Live updates

### ⚠️ Edge Cases

* Reordering when timestamps update

### 🧠 Approach

* Stable keys
* Avoid index

***

## **17. Shopping Cart with Dynamic Pricing**

### 📌 Requirements

* Add/remove items
* Update quantity

### ⚠️ Edge Cases

* Duplicate products
* Price recalculation

### 🧠 Approach

* Composite keys if needed

***

## **18. Tag Input System (Chips UI)**

### 📌 Requirements

* Add/remove/reorder tags

### ⚠️ Edge Cases

* Duplicate tags
* Rapid deletion

### 🧠 Approach

* Unique IDs for tags
* Avoid using text as key

***

# 🧠 Final Architectural Insights

Senior-level thinking around Lists & Keys:

### 🔑 Identity First

* Keys define **UI identity layer**
* Not just rendering hint

***

### ⚙️ Data Modeling Matters

* Normalize data
* Maintain stable IDs

***

### 🚀 Performance Thinking

* Avoid:

  * Recreating arrays
  * Unstable keys
* Use:

  * Memoization
  * Virtualization

***

### ⚠️ Real-World Rule

> Most production bugs are NOT about rendering
> They are about **incorrect identity mapping**

***

Below is a **FAANG-level interview set (19 questions)** on **React Lists & Keys**.
These are designed to probe **depth, trade-offs, debugging ability, and real-world thinking**.

***

# 🧠 Senior Frontend Interview: Lists & Keys

***

## **1. Why does React rely on keys instead of doing a full diff of the tree?**

### 🔍 Follow-up

* What would happen if React used a deep diff algorithm?

### ✅ Strong Answer

React uses a **heuristic O(n) diffing algorithm** instead of O(n³) deep diff.
Keys provide a **hint for identity**, allowing React to:

* Match elements efficiently
* Avoid expensive comparisons

Without keys → fallback to position-based diffing → incorrect updates.

### ❌ Weak Answer

“Keys help React render faster”

👉 Fails because:

* Doesn’t explain algorithmic trade-off (O(n) vs O(n³))

***

## **2. Explain a real bug caused by using index as key**

### 🔍 Follow-up

* Can you reproduce it with controlled inputs?

### ✅ Strong Answer

In a reorderable list:

```jsx theme={null}
items.map((item, i) => <input key={i} value={item.value} />)
```

Reordering causes:

* Inputs to retain wrong values

👉 Because:

* Index changes → identity mismatch
* React reuses DOM nodes incorrectly

### ❌ Weak Answer

“Index is bad when list changes”

👉 Too vague, no concrete failure scenario

***

## **3. How do keys affect component lifecycle?**

### 🔍 Follow-up

* Can keys force a remount?

### ✅ Strong Answer

Keys determine **component identity**:

* Same key → update
* Different key → unmount + mount

```jsx theme={null}
<Component key={id} />
```

Changing key:

* Triggers fresh lifecycle
* Resets state

### ❌ Weak Answer

“Keys are just for lists”

👉 Misses deeper concept of identity

***

## **4. How would you debug a UI where list items randomly lose state?**

### 🔍 Follow-up

* What tools or techniques would you use?

### ✅ Strong Answer

Steps:

1. Check key stability
2. Look for:

   * `Math.random()`
   * Index keys
3. Verify list mutations
4. Use React DevTools to inspect component remounts

### ❌ Weak Answer

“I would check state logic”

👉 Ignores reconciliation issues

***

## **5. Why are keys only required among siblings?**

### 🔍 Follow-up

* What happens across different parent nodes?

### ✅ Strong Answer

React reconciliation is scoped per parent:

* Each parent maintains its own child map
* Keys only need to be unique within that scope

### ❌ Weak Answer

“Because React doesn’t need global keys”

👉 Lacks internal explanation

***

## **6. What trade-offs exist when choosing a key?**

### 🔍 Follow-up

* When would you use composite keys?

### ✅ Strong Answer

Trade-offs:

| Option          | Trade-off                |
| --------------- | ------------------------ |
| ID              | Best, stable             |
| Index           | Unsafe for dynamic lists |
| UUID per render | Breaks identity          |
| Composite       | Useful when no unique ID |

Example:

```jsx theme={null}
key={`${id}-${version}`}
```

### ❌ Weak Answer

“Use id always”

👉 Ignores edge cases

***

## **7. How does React handle list reordering internally?**

### 🔍 Follow-up

* What changes in DOM operations?

### ✅ Strong Answer

React:

1. Builds key → element map
2. Matches new list with old
3. Moves DOM nodes instead of recreating

Without keys:

* Recreates nodes → inefficient

### ❌ Weak Answer

“React re-renders the list”

👉 Oversimplified

***

## **8. How do keys interact with React.memo?**

### 🔍 Follow-up

* Why might memoization fail unexpectedly?

### ✅ Strong Answer

If key changes:

* Component remounts
* Memoization is bypassed

👉 Keys control instance identity, not memo

### ❌ Weak Answer

“Memo works regardless”

👉 Incorrect

***

## **9. Design a large list (10k items) efficiently**

### 🔍 Follow-up

* What role do keys play in virtualization?

### ✅ Strong Answer

* Use virtualization (`react-window`)
* Stable keys ensure:

  * Correct reuse
  * Minimal DOM ops

### ❌ Weak Answer

“Use pagination”

👉 Avoids core problem

***

## **10. How would you handle duplicate IDs from backend?**

### 🔍 Follow-up

* What are risks of ignoring this?

### ✅ Strong Answer

* Detect duplicates
* Use composite keys:

```jsx theme={null}
key={`${id}-${index}`}
```

Trade-off:

* Still not ideal → backend fix preferred

### ❌ Weak Answer

“Just use index”

👉 Reintroduces bugs

***

## **11. Why can filtering break UI with index keys?**

### 🔍 Follow-up

* Explain with an example

### ✅ Strong Answer

Filtering changes indices:

* Identity shifts
* React mismatches elements

### ❌ Weak Answer

“Because index changes”

👉 Needs deeper explanation

***

## **12. When would you intentionally change keys?**

### 🔍 Follow-up

* Real-world use case?

### ✅ Strong Answer

To force remount:

* Reset form
* Restart animation

```jsx theme={null}
<Form key={userId} />
```

### ❌ Weak Answer

“Never change keys”

👉 Too rigid

***

## **13. What happens when inserting in the middle of a list?**

### 🔍 Follow-up

* Compare with and without keys

### ✅ Strong Answer

With keys:

* Only new item added

Without keys:

* All subsequent items re-render incorrectly

***

## **14. How would you design a drag-and-drop system?**

### 🔍 Follow-up

* What breaks if keys are wrong?

### ✅ Strong Answer

* Use stable IDs
* Maintain order separately

Wrong keys:

* State corruption
* Visual glitches

***

## **15. Explain a performance issue caused by improper keys**

### 🔍 Follow-up

* How to measure it?

### ✅ Strong Answer

Unstable keys:

* Cause full remount
* Lose memo benefits

Measure via:

* React Profiler

***

## **16. Why should keys not depend on render-time calculations?**

### 🔍 Follow-up

* Examples?

### ✅ Strong Answer

Render-time values (e.g., `Date.now()`) change each render → unstable identity

***

## **17. How do keys impact animations?**

### 🔍 Follow-up

* Example with Framer Motion?

### ✅ Strong Answer

Wrong keys:

* Reset animations
* Break transitions

Correct keys:

* Enable smooth motion

***

## **18. What is a subtle bug caused by mutating arrays?**

### 🔍 Follow-up

* How does React detect changes?

### ✅ Strong Answer

Mutation:

```jsx theme={null}
items.push(newItem)
```

React may not detect change properly → inconsistent UI

Use immutable updates

***

## **19. How would you architect a real-time feed with frequent updates?**

### 🔍 Follow-up

* How to avoid re-render storms?

### ✅ Strong Answer

* Normalize data
* Stable keys
* Incremental updates
* Memoized components

***

# 🧠 Final FAANG-Level Insight

A strong candidate understands:

### 🔑 Keys = Identity Layer

Not just a prop — it defines:

* Component lifecycle
* State persistence
* DOM reuse

***

### ⚠️ Most Critical Mental Model

> React does NOT track elements
> It tracks **identity through keys**

***

### 🚀 What Interviewers Look For

* Can you debug subtle UI bugs?
* Can you reason about reconciliation?
* Can you make trade-offs under constraints?

***