> ## 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.

# useMemo

# 📘 React `useMemo` — Complete In-Depth Guide

***

# 1. Introduction

## 🔹 What is `useMemo`?

`useMemo` is a **React Hook** used to **memoize (cache) the result of a computation** so that it is **only recalculated when its dependencies change**.

```js theme={null}
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```

👉 It prevents unnecessary recalculations on every render.

***

## 🔹 Why is it important in React?

React re-renders components frequently. During each render:

* All functions inside the component run again
* Expensive computations can degrade performance

`useMemo` helps:

* Avoid **recomputing expensive calculations**
* Reduce **CPU usage**
* Improve **render performance**
* Stabilize **derived values** for referential equality

***

## 🔹 When and why we use it

Use `useMemo` when:

### ✅ Expensive Computations

```js theme={null}
const sortedList = useMemo(() => {
  return bigList.sort((a, b) => a.value - b.value);
}, [bigList]);
```

### ✅ Preventing Unnecessary Re-renders (Referential Equality)

```js theme={null}
const filteredItems = useMemo(() => {
  return items.filter(item => item.active);
}, [items]);
```

### ✅ Stable Props for Child Components

```js theme={null}
const config = useMemo(() => ({ theme: 'dark' }), []);
```

***

# 2. Concepts / Internal Workings

## 🔹 Core Concept: Memoization

Memoization means:

> Cache the result of a function and reuse it unless inputs change.

***

## 🔹 How `useMemo` Works Internally

At a high level:

1. React stores:

   * Last computed value
   * Dependency array

2. On re-render:

   * React compares dependencies (shallow comparison)
   * If unchanged → return cached value
   * If changed → recompute

***

## 🔹 Dependency Array Behavior

```js theme={null}
useMemo(() => compute(), [dep1, dep2]);
```

* Compared using **Object.is**
* Works well for primitives
* Objects/arrays need stable references

***

## 🔹 Relationship with React Rendering

* `useMemo` runs **during render phase**
* It is **not async**
* It does **not prevent re-renders**, only computation

***

## 🔹 Relationship with Other Hooks

### `useCallback`

```js theme={null}
useCallback(fn, deps) === useMemo(() => fn, deps)
```

* `useMemo` → memoizes value
* `useCallback` → memoizes function

***

### `useEffect`

| Hook      | Purpose           |
| --------- | ----------------- |
| useMemo   | Cache computation |
| useEffect | Side effects      |

***

### `React.memo`

* `useMemo` helps create **stable props**
* `React.memo` uses them to avoid re-render

```js theme={null}
const childProps = useMemo(() => ({ value }), [value]);
```

***

## 🔹 Referential Equality

Important concept:

```js theme={null}
{} === {} // false
```

Without `useMemo`:

```js theme={null}
const obj = { a: 1 }; // new reference every render
```

With `useMemo`:

```js theme={null}
const obj = useMemo(() => ({ a: 1 }), []);
```

***

# 3. Syntax & Examples

***

## 🔹 Basic Syntax

```js theme={null}
const memoizedValue = useMemo(() => {
  return expensiveComputation();
}, [dependencies]);
```

***

## 🔹 Example 1: Expensive Calculation

```js theme={null}
function ExpensiveComponent({ num }) {
  const squared = useMemo(() => {
    console.log("Computing...");
    return num * num;
  }, [num]);

  return <div>{squared}</div>;
}
```

***

## 🔹 Example 2: Filtering List

```js theme={null}
function FilteredList({ items, query }) {
  const filtered = useMemo(() => {
    return items.filter(item =>
      item.toLowerCase().includes(query.toLowerCase())
    );
  }, [items, query]);

  return filtered.map(item => <div key={item}>{item}</div>);
}
```

***

## 🔹 Example 3: Sorting Data

```js theme={null}
const sortedData = useMemo(() => {
  return [...data].sort((a, b) => a.price - b.price);
}, [data]);
```

***

## 🔹 Example 4: Stable Object for Child

```js theme={null}
const settings = useMemo(() => {
  return { darkMode: true };
}, []);

return <Child config={settings} />;
```

***

## 🔹 Example 5: Avoiding Recalculation in Parent Re-render

```js theme={null}
function Parent({ count }) {
  const expensiveValue = useMemo(() => {
    let total = 0;
    for (let i = 0; i < 100000000; i++) {
      total += i;
    }
    return total;
  }, []);

  return <div>{count} - {expensiveValue}</div>;
}
```

***

## 🔹 Mini Example Variations

### Without `useMemo`

```js theme={null}
const result = computeExpensive(); // runs every render
```

### With `useMemo`

```js theme={null}
const result = useMemo(() => computeExpensive(), []);
```

***

### Memoizing Array

```js theme={null}
const list = useMemo(() => [1, 2, 3], []);
```

***

### Memoizing Derived Value

```js theme={null}
const total = useMemo(() => price * quantity, [price, quantity]);
```

***

# 4. Edge Cases / Common Mistakes

***

## ❌ Overusing `useMemo`

```js theme={null}
const value = useMemo(() => a + b, [a, b]); // unnecessary
```

👉 Cheap computations don’t need memoization.

***

## ❌ Missing Dependencies

```js theme={null}
useMemo(() => compute(a, b), [a]); // b missing
```

👉 Leads to stale values (bugs).

***

## ❌ Using for Side Effects

```js theme={null}
useMemo(() => {
  console.log("Side effect"); // WRONG
}, []);
```

👉 Use `useEffect` instead.

***

## ❌ Memoizing Mutable Data

```js theme={null}
const obj = useMemo(() => ({ count: 0 }), []);
obj.count++; // mutation breaks predictability
```

***

## ❌ Wrong Expectation: Prevent Re-render

```js theme={null}
useMemo(() => value, [value]);
```

👉 Component still re-renders.

***

## ❌ Dependency on Non-stable Objects

```js theme={null}
useMemo(() => compute(data), [data]);
```

If `data` changes reference every render → memo breaks.

***

## ❌ Expensive Comparison vs Computation

Sometimes:

* Dependency comparison cost > computation cost

👉 Makes `useMemo` useless or worse.

***

# 5. Best Practices

***

## ✅ Use Only When Needed

Ask:

* Is computation expensive?
* Is re-render frequent?

If **no → don’t use it**

***

## ✅ Prefer Simplicity First

```js theme={null}
// ❌ Over-optimized
const value = useMemo(() => a + b, [a, b]);

// ✅ Simple
const value = a + b;
```

***

## ✅ Stabilize Props for Memoized Components

```js theme={null}
const config = useMemo(() => ({ theme: 'dark' }), []);
return <Child config={config} />;
```

***

## ✅ Keep Dependency Arrays Correct

Use ESLint rule:

```bash theme={null}
react-hooks/exhaustive-deps
```

***

## ✅ Avoid Nested `useMemo` Complexity

Bad:

```js theme={null}
const a = useMemo(...);
const b = useMemo(() => compute(a), [a]);
```

👉 Can make logic hard to debug

***

## ✅ Measure Before Optimizing

Use:

* React DevTools Profiler
* Performance tab

👉 Don’t assume — **measure first**

***

## ✅ Use for Referential Stability (Important)

Especially for:

* Props to memoized children
* Dependency arrays in other hooks

***

## ✅ Combine with `React.memo`

```js theme={null}
const Child = React.memo(({ data }) => {...});

const data = useMemo(() => compute(), []);
```

***

## ✅ Avoid Heavy Logic Inside JSX

```js theme={null}
// ❌
return <div>{heavyCompute()}</div>

// ✅
const value = useMemo(() => heavyCompute(), []);
return <div>{value}</div>
```

***

# 🚀 Final Mental Model

* `useMemo` is a **performance optimization tool**, not a default tool
* It trades:

  * **Memory + complexity** for **CPU savings**
* Use it when:

  * Computation is expensive
  * Referential stability matters
* Avoid when:

  * Logic is simple
  * Premature optimization

***

Below is a **senior-level, depth-focused set of conceptual questions on `useMemo`**.
Each question is designed to test **how you think**, not just what you know.

***

# 🧠 Advanced `useMemo` Interview Questions (Senior Level)

***

## 1. What problem does `useMemo` actually solve in React’s rendering model?

### ✅ Answer

`useMemo` solves **unnecessary recomputation**, not re-rendering.

React’s rendering model:

* Every render → component function runs again
* All calculations inside are re-executed

Problem:

```js theme={null}
const value = expensiveComputation(data);
```

This runs on **every render**, even if `data` didn’t change.

Solution:

```js theme={null}
const value = useMemo(() => expensiveComputation(data), [data]);
```

### 🔍 WHY

* React has **no built-in memoization for computations**
* `useMemo` introduces **manual caching**
* It optimizes **CPU work**, not reconciliation

### ⚖️ Alternative

* Move computation outside component → not possible if it depends on props/state
* Use Web Workers → for heavy async work

***

## 2. How does `useMemo` work internally in React?

### ✅ Answer

Internally, React:

1. Stores:

   * Last computed value
   * Dependency array

2. On next render:

   * Compares dependencies using **Object.is**
   * If same → returns cached value
   * If different → recomputes

### 🔍 WHY

React uses a **hook state list per fiber node**:

* Each `useMemo` occupies a slot
* Dependencies stored alongside value

### ⚠️ Important Insight

* Comparison is **shallow**
* No deep equality check

***

## 3. Why is `useMemo` not guaranteed to always memoize?

### ✅ Answer

Because React treats it as a **performance hint**, not a strict guarantee.

React may:

* Drop memoized values (e.g., memory pressure, concurrent mode)
* Recompute anyway

### 🔍 WHY

React prioritizes:

* Correctness
* Simplicity of implementation
* Memory efficiency

### 🚫 Implication

Never rely on `useMemo` for correctness:

```js theme={null}
// ❌ WRONG: relying on memoization for logic
const id = useMemo(() => generateUniqueId(), []);
```

***

## 4. How does `useMemo` behave in React Strict Mode?

### ✅ Answer

In Strict Mode (development only):

* The function inside `useMemo` may run **twice**

```js theme={null}
useMemo(() => {
  console.log("Runs twice in dev");
  return compute();
}, []);
```

### 🔍 WHY

Strict Mode intentionally:

* Detects side effects
* Forces double execution

### ⚠️ Implication

* `useMemo` must be **pure**
* No side effects allowed

***

## 5. When does `useMemo` actually hurt performance?

### ✅ Answer

When:

### 1. Computation is cheap

```js theme={null}
const value = useMemo(() => a + b, [a, b]);
```

### 2. Dependencies change frequently

```js theme={null}
useMemo(() => compute(data), [data]); // if data always new reference
```

### 3. Memory overhead > CPU savings

### 🔍 WHY

`useMemo` adds:

* Memory usage
* Dependency comparison cost
* Code complexity

### ⚖️ Trade-off

| Cost       | Benefit             |
| ---------- | ------------------- |
| Memory     | Avoid recomputation |
| Complexity | Performance         |

***

## 6. Explain referential equality and why `useMemo` is critical for it.

### ✅ Answer

Referential equality:

```js theme={null}
{} === {} // false
```

Every render:

```js theme={null}
const obj = { a: 1 }; // new reference
```

Problem:

* Causes unnecessary child re-renders

Solution:

```js theme={null}
const obj = useMemo(() => ({ a: 1 }), []);
```

### 🔍 WHY

React compares props by **reference**, not deep equality.

### ⚖️ Alternative

* `React.memo` → skips render if props unchanged
* But needs stable references → `useMemo` helps

***

## 7. Why is `useMemo` often paired with `React.memo`?

### ✅ Answer

Because they solve **different parts of the problem**:

* `useMemo` → stabilizes values
* `React.memo` → skips re-render

```js theme={null}
const data = useMemo(() => compute(), []);

const Child = React.memo(({ data }) => {...});
```

### 🔍 WHY

Without `useMemo`:

* New reference each render → `React.memo` useless

***

## 8. What happens if you omit dependencies in `useMemo`?

### ✅ Answer

You get **stale values**.

```js theme={null}
useMemo(() => compute(a, b), [a]); // b missing
```

### 🔍 WHY

* React doesn’t track variables inside function
* It relies entirely on dependency array

### ⚠️ Result

* Bugs that are hard to detect
* Inconsistent UI

***

## 9. Why is using objects/arrays as dependencies tricky?

### ✅ Answer

Because of reference instability:

```js theme={null}
const data = { a: 1 };

useMemo(() => compute(data), [data]); // always changes
```

### 🔍 WHY

* New object created every render
* Reference changes → memo invalidated

### ✅ Fix

```js theme={null}
const data = useMemo(() => ({ a: 1 }), []);
```

***

## 10. Can `useMemo` replace `useEffect`?

### ❌ Answer

No.

### 🔍 WHY

| useMemo            | useEffect         |
| ------------------ | ----------------- |
| Runs during render | Runs after render |
| Pure computation   | Side effects      |

### 🚫 Wrong usage

```js theme={null}
useMemo(() => {
  fetchData(); // ❌ side effect
}, []);
```

***

## 11. How does `useMemo` interact with closures?

### ✅ Answer

It captures values from the render it was created in.

```js theme={null}
const value = useMemo(() => count * 2, []);
```

### 🔍 Problem

* `count` is stale if not in dependencies

### ✅ Fix

```js theme={null}
useMemo(() => count * 2, [count]);
```

***

## 12. What’s the difference between memoizing a value vs computing inline?

### ✅ Answer

Inline:

```js theme={null}
const value = compute();
```

Memoized:

```js theme={null}
const value = useMemo(() => compute(), []);
```

### 🔍 WHY it matters

* Inline → recompute every render
* Memo → reuse cached result

### ⚖️ Decision

Use memo only when:

* Computation is expensive
* Renders are frequent

***

## 13. Why shouldn’t you mutate values returned from `useMemo`?

### ✅ Answer

Because it breaks predictability.

```js theme={null}
const obj = useMemo(() => ({ count: 0 }), []);
obj.count++;
```

### 🔍 WHY

* React assumes immutability
* Mutation causes hidden bugs

***

## 14. How does `useMemo` behave with asynchronous logic?

### ✅ Answer

It doesn’t handle async well.

```js theme={null}
const data = useMemo(async () => {
  return await fetchData();
}, []);
```

### 🔍 Problem

* Returns a Promise
* Not reactive

### ✅ Correct approach

Use `useEffect` + state

***

## 15. What is the difference between `useMemo` and caching outside React?

### ✅ Answer

External caching:

```js theme={null}
let cache;
function compute() {
  if (!cache) cache = expensive();
  return cache;
}
```

### 🔍 Difference

| External Cache       | useMemo                |
| -------------------- | ---------------------- |
| Global/shared        | Per component instance |
| Manual invalidation  | Dependency-driven      |
| Hard to sync with UI | React-aware            |

***

## 16. How does `useMemo` behave in concurrent rendering?

### ✅ Answer

* React may start rendering, pause, discard work
* `useMemo` may recompute multiple times

### 🔍 WHY

Concurrent mode:

* Prioritizes responsiveness
* Work can be interrupted

### ⚠️ Implication

* Computation must be **pure and cheap enough**

***

## 17. Why is `useMemo` not a substitute for proper data structures?

### ✅ Answer

Bad:

```js theme={null}
useMemo(() => array.includes(x), [array]);
```

Better:

```js theme={null}
const set = new Set(array);
set.has(x);
```

### 🔍 WHY

* Algorithmic improvement > memoization
* `O(n)` vs `O(1)`

***

## 18. When would you remove `useMemo` from a codebase?

### ✅ Answer

When:

* No measurable performance gain
* Dependencies change frequently
* Code becomes harder to read

### 🔍 WHY

Premature optimization:

* Adds complexity
* No real benefit

***

## 19. How do you decide if `useMemo` is needed?

### ✅ Answer

Ask:

1. Is computation expensive?
2. Does it run frequently?
3. Are dependencies stable?

### 🔍 Tools

* React DevTools Profiler
* Performance profiling

***

## 20. Explain a real-world scenario where `useMemo` is critical.

### ✅ Answer

### Scenario: Large data table

```js theme={null}
const filteredData = useMemo(() => {
  return data.filter(row => row.name.includes(search));
}, [data, search]);
```

### 🔍 WHY

* Filtering large datasets is expensive
* Prevents recomputation on unrelated renders

### ⚖️ Without `useMemo`

* UI becomes slow
* CPU spikes

***

# 🚀 Final Insight

A senior engineer understands:

> `useMemo` is not about “optimizing everything” —
> it’s about **controlling when work happens** in React.

***

Below are **senior-level, tricky MCQs on `useMemo`** designed to test **deep understanding, not recall**.

***

# 🧠 Advanced MCQs on `useMemo`

***

## **1. What will happen when this component re-renders?**

```js theme={null}
function App({ count }) {
  const value = useMemo(() => {
    console.log("Computing...");
    return count * 2;
  }, []);

  return <div>{value}</div>;
}
```

### Options:

A. Logs on every render
B. Logs only on first render
C. Logs only when `count` changes
D. Logs twice on every render

### ✅ Correct Answer: **B**

### Explanation:

* Dependency array is `[]` → runs only once
* `count` is ignored → stale value

### Why others are wrong:

* A: Incorrect → dependencies prevent rerun
* C: Incorrect → `count` not included
* D: Incorrect → Strict Mode only doubles in dev, not always

***

## **2. What is the real issue in this code?**

```js theme={null}
const result = useMemo(() => a + b, [a, b]);
```

### Options:

A. Causes unnecessary re-renders
B. Adds unnecessary overhead
C. Causes stale closure
D. Breaks referential equality

### ✅ Correct Answer: **B**

### Explanation:

* `a + b` is trivial → memoization cost > benefit

### Why others are wrong:

* A: `useMemo` doesn’t trigger re-renders
* C: Dependencies are correct → no stale closure
* D: Not relevant for primitives

***

## **3. What happens if dependencies change every render?**

```js theme={null}
const obj = { a: 1 };

const value = useMemo(() => compute(obj), [obj]);
```

### Options:

A. `useMemo` caches result correctly
B. `useMemo` recomputes every render
C. React throws an error
D. Value becomes stale

### ✅ Correct Answer: **B**

### Explanation:

* New object → new reference → dependency changes → recompute

### Why others are wrong:

* A: False → reference instability
* C: No runtime error
* D: Opposite → always fresh

***

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

```js theme={null}
useMemo(() => {
  fetchData();
}, []);
```

### Options:

A. `fetchData` runs twice
B. Side effects in render phase
C. Dependency issue
D. Memory leak

### ✅ Correct Answer: **B**

### Explanation:

* `useMemo` runs during render → side effects are unsafe

### Why others are wrong:

* A: Only in Strict Mode (dev), not core issue
* C: Dependencies are fine
* D: Not necessarily

***

## **5. Which scenario justifies `useMemo` the most?**

A. `const total = a + b`
B. `const list = items.map(x => x * 2)` (small array)
C. Filtering a 10k item dataset
D. Rendering JSX

### ✅ Correct Answer: **C**

### Explanation:

* Expensive computation + frequent renders

### Why others are wrong:

* A: trivial
* B: small computation
* D: irrelevant

***

## **6. What is true about `useMemo` and re-renders?**

A. It prevents component re-render
B. It prevents child re-render
C. It only memoizes computation
D. It stops React reconciliation

### ✅ Correct Answer: **C**

### Explanation:

* It only caches value, not render cycle

### Why others are wrong:

* A/B: Needs `React.memo`
* D: Incorrect understanding

***

## **7. What will happen here?**

```js theme={null}
const value = useMemo(() => ({ a: 1 }), []);
value.a = 5;
```

### Options:

A. Safe and expected
B. Causes re-render
C. Breaks immutability assumptions
D. React throws error

### ✅ Correct Answer: **C**

### Explanation:

* Mutation breaks predictable behavior

### Why others are wrong:

* A: Not safe
* B: No re-render triggered
* D: React doesn’t detect mutation

***

## **8. Why might this still re-render child?**

```js theme={null}
const data = useMemo(() => ({ value }), [value]);
<Child data={data} />
```

### Options:

A. `useMemo` doesn’t work with objects
B. `Child` is not memoized
C. Dependency array is wrong
D. React ignores memo

### ✅ Correct Answer: **B**

### Explanation:

* Child re-renders unless wrapped in `React.memo`

***

## **9. What’s the subtle bug here?**

```js theme={null}
const doubled = useMemo(() => count * 2, []);
```

### Options:

A. Performance issue
B. Stale value
C. Infinite loop
D. Syntax error

### ✅ Correct Answer: **B**

### Explanation:

* `count` not in dependencies → stale

***

## **10. What is the main cost of `useMemo`?**

A. CPU
B. Memory + comparison overhead
C. Network
D. DOM updates

### ✅ Correct Answer: **B**

### Explanation:

* Stores cached value + compares dependencies

***

## **11. How is `useMemo` different from `useCallback`?**

A. No difference
B. `useMemo` returns function
C. `useCallback` is syntactic sugar over `useMemo`
D. `useMemo` is async

### ✅ Correct Answer: **C**

### Explanation:

```js theme={null}
useCallback(fn, deps) === useMemo(() => fn, deps)
```

***

## **12. What happens in Strict Mode?**

### Options:

A. `useMemo` runs once
B. Runs twice in dev
C. Skipped entirely
D. Throws warning

### ✅ Correct Answer: **B**

### Explanation:

* Double invocation to detect side effects

***

## **13. Why is this inefficient?**

```js theme={null}
const sorted = useMemo(() => data.sort(), [data]);
```

### Options:

A. Sorting is cheap
B. Mutates original array
C. Dependency issue
D. Memoization fails

### ✅ Correct Answer: **B**

### Explanation:

* `.sort()` mutates → side effects

***

## **14. Which is better?**

A.

```js theme={null}
useMemo(() => array.includes(x), [array]);
```

B.

```js theme={null}
const set = new Set(array);
set.has(x);
```

### ✅ Correct Answer: **B**

### Explanation:

* Algorithm improvement > memoization

***

## **15. When can React ignore `useMemo` cache?**

### Options:

A. Never
B. In concurrent rendering
C. Only in production
D. Only with objects

### ✅ Correct Answer: **B**

### Explanation:

* React may discard work in concurrent mode

***

## **16. What’s wrong with this pattern?**

```js theme={null}
const config = useMemo(() => ({ theme }), []);
```

### Options:

A. Syntax error
B. Missing dependency
C. Performance issue
D. Infinite loop

### ✅ Correct Answer: **B**

### Explanation:

* `theme` missing → stale config

***

## **17. Why is this not useful?**

```js theme={null}
const memo = useMemo(() => true, []);
```

### Options:

A. Boolean not supported
B. No computation to optimize
C. Causes re-render
D. Dependency issue

### ✅ Correct Answer: **B**

***

## **18. What happens here?**

```js theme={null}
const data = useMemo(() => compute(), [Math.random()]);
```

### Options:

A. Runs once
B. Never runs
C. Runs every render
D. Throws error

### ✅ Correct Answer: **C**

### Explanation:

* `Math.random()` changes → dependency always different

***

## 🚀 Final Insight

A strong engineer understands:

* `useMemo` is **not a default tool**
* It’s a **trade-off mechanism**
* The real skill is knowing **when NOT to use it**

***

Below are **18 high-quality coding problems on `useMemo`**, designed to simulate **real-world engineering scenarios**.
Each focuses on **performance, correctness, and decision-making**.

***

# 🧠 `useMemo` Coding Problems (Senior Level)

***

## **1. Optimizing Large List Filtering**

### 🧩 Problem

You have a list of 50,000 users. Implement search filtering without degrading performance.

### Constraints

* Frequent re-renders (typing input)
* Dataset is large

### Expected Behavior

* Filtering runs only when `query` or `users` changes

### Edge Cases

* Empty query → return full list
* Case-insensitive search

### ✅ Solution

```js theme={null}
const filteredUsers = useMemo(() => {
  if (!query) return users;
  return users.filter(u =>
    u.name.toLowerCase().includes(query.toLowerCase())
  );
}, [users, query]);
```

### 🔍 Explanation

* Prevents expensive filtering on unrelated renders

***

## **2. Preventing Expensive Sorting on Every Render**

### 🧩 Problem

Sort products by price efficiently.

### Constraints

* Products array may update occasionally
* Sorting is expensive

### Edge Cases

* Stable sorting
* Avoid mutating original array

### ✅ Solution

```js theme={null}
const sortedProducts = useMemo(() => {
  return [...products].sort((a, b) => a.price - b.price);
}, [products]);
```

### 🔍 Explanation

* Avoids mutation + avoids repeated sort

***

## **3. Stabilizing Props for Memoized Child**

### 🧩 Problem

A child wrapped in `React.memo` still re-renders.

### Expected Behavior

* Child should not re-render unnecessarily

### ✅ Solution

```js theme={null}
const config = useMemo(() => ({
  theme: 'dark',
  layout: 'grid'
}), []);

return <Child config={config} />;
```

### 🔍 Explanation

* Prevents new object reference

***

## **4. Derived State from Complex Computation**

### 🧩 Problem

Calculate total cart price with discounts.

### Constraints

* Cart updates occasionally
* Discounts logic complex

### ✅ Solution

```js theme={null}
const total = useMemo(() => {
  return cart.reduce((sum, item) => {
    let price = item.price * item.qty;
    if (item.qty > 10) price *= 0.9;
    return sum + price;
  }, 0);
}, [cart]);
```

***

## **5. Avoid Recomputing Heavy Math**

### 🧩 Problem

Compute factorial for large number.

### Edge Cases

* n = 0
* large n (performance)

### ✅ Solution

```js theme={null}
const factorial = useMemo(() => {
  let result = 1;
  for (let i = 1; i <= n; i++) result *= i;
  return result;
}, [n]);
```

***

## **6. Memoizing Expensive Chart Data Transformation**

### 🧩 Problem

Transform API data for chart rendering.

### Constraints

* Data transformation expensive
* Chart re-renders often

### ✅ Solution

```js theme={null}
const chartData = useMemo(() => {
  return data.map(d => ({
    x: d.date,
    y: d.value * 100
  }));
}, [data]);
```

***

## **7. Prevent Infinite Loop in useEffect Dependency**

### 🧩 Problem

Effect depends on object → infinite loop

```js theme={null}
useEffect(() => {
  fetchData(config);
}, [config]);
```

### ✅ Fix

```js theme={null}
const config = useMemo(() => ({ limit: 10 }), []);
```

### 🔍 Explanation

* Stabilizes dependency

***

## **8. Optimizing Table Column Definitions**

### 🧩 Problem

Columns re-created → table re-renders

### ✅ Solution

```js theme={null}
const columns = useMemo(() => [
  { key: 'name', label: 'Name' },
  { key: 'age', label: 'Age' }
], []);
```

***

## **9. Avoid Expensive Regex Execution**

### 🧩 Problem

Heavy regex validation runs on every render

### ✅ Solution

```js theme={null}
const isValid = useMemo(() => {
  return regex.test(input);
}, [input]);
```

***

## **10. Dynamic Theme Computation**

### 🧩 Problem

Theme object depends on user settings

### ✅ Solution

```js theme={null}
const theme = useMemo(() => {
  return {
    color: darkMode ? 'black' : 'white'
  };
}, [darkMode]);
```

***

## **11. Debounced Search Optimization (Combined Thinking)**

### 🧩 Problem

Search input triggers expensive filtering

### Constraint

* Avoid recompute on every keystroke instantly

### ✅ Solution

```js theme={null}
const filtered = useMemo(() => {
  return data.filter(d => d.includes(debouncedQuery));
}, [debouncedQuery]);
```

***

## **12. Memoizing Context Value**

### 🧩 Problem

Context provider causes re-renders

### ✅ Solution

```js theme={null}
const value = useMemo(() => ({
  user,
  logout
}), [user]);
```

***

## **13. Preventing Recalculation in Parent Re-renders**

### 🧩 Problem

Parent re-renders → heavy computation reruns

### ✅ Solution

```js theme={null}
const heavy = useMemo(() => computeHeavy(), []);
```

***

## **14. Avoid Recomputing Derived Map**

### 🧩 Problem

Convert array to lookup map

### ✅ Solution

```js theme={null}
const userMap = useMemo(() => {
  return Object.fromEntries(users.map(u => [u.id, u]));
}, [users]);
```

***

## **15. Optimizing Permission Checks**

### 🧩 Problem

Complex permission logic runs repeatedly

### ✅ Solution

```js theme={null}
const hasAccess = useMemo(() => {
  return roles.includes('admin') || permissions.includes('edit');
}, [roles, permissions]);
```

***

## **16. Memoizing Computed Styles**

### 🧩 Problem

Inline styles cause child re-render

### ✅ Solution

```js theme={null}
const style = useMemo(() => ({
  color: isActive ? 'green' : 'gray'
}), [isActive]);
```

***

## **17. Avoiding Re-render in Virtualized List**

### 🧩 Problem

Visible rows computation is expensive

### ✅ Solution

```js theme={null}
const visibleRows = useMemo(() => {
  return rows.slice(start, end);
}, [rows, start, end]);
```

***

## **18. Expensive Data Grouping**

### 🧩 Problem

Group orders by category

### ✅ Solution

```js theme={null}
const grouped = useMemo(() => {
  return orders.reduce((acc, order) => {
    acc[order.category] = acc[order.category] || [];
    acc[order.category].push(order);
    return acc;
  }, {});
}, [orders]);
```

***

## 🚀 Final Takeaways

These problems test whether you:

* Recognize **when computation is expensive**
* Understand **referential equality**
* Avoid **premature optimization**
* Use `useMemo` for **real performance wins**

***

Below are **18 real-world debugging challenges involving `useMemo`**, written the way they typically show up in production code reviews.

Each one tests your ability to spot **subtle bugs, incorrect assumptions, and performance traps**.

***

# 🧠 `useMemo` Debugging Challenges (Senior Level)

***

## **1. Stale Value Bug**

```js theme={null}
const total = useMemo(() => price * quantity, []);
```

### ❌ What’s wrong?

* Missing dependencies → stale value

### 🤔 WHY it happens

* `useMemo` only runs once → ignores updates to `price` or `quantity`

### ✅ Fix

```js theme={null}
const total = useMemo(() => price * quantity, [price, quantity]);
```

### 💡 Best Practice

* Always include all reactive values in dependencies

***

## **2. Memoization Broken by Reference**

```js theme={null}
const filters = { active: true };

const result = useMemo(() => applyFilters(data, filters), [filters]);
```

### ❌ What’s wrong?

* `filters` recreated every render → memo useless

### 🤔 WHY

* New object reference each render

### ✅ Fix

```js theme={null}
const filters = useMemo(() => ({ active: true }), []);
```

### 💡 Best Practice

* Stabilize objects used as dependencies

***

## **3. Side Effect Inside useMemo**

```js theme={null}
const data = useMemo(() => {
  fetch('/api/data').then(res => res.json());
  return [];
}, []);
```

### ❌ What’s wrong?

* Side effects inside render phase

### 🤔 WHY

* `useMemo` runs during render → unsafe

### ✅ Fix

```js theme={null}
useEffect(() => {
  fetch('/api/data').then(...);
}, []);
```

### 💡 Best Practice

* `useMemo` = pure computation only

***

## **4. Mutating Memoized Value**

```js theme={null}
const config = useMemo(() => ({ count: 0 }), []);
config.count++;
```

### ❌ What’s wrong?

* Mutating memoized object

### 🤔 WHY

* Breaks immutability → unpredictable UI

### ✅ Fix

```js theme={null}
const config = useMemo(() => ({ count: 0 }), []);
// treat as readonly
```

### 💡 Best Practice

* Never mutate memoized values

***

## **5. Overusing useMemo**

```js theme={null}
const sum = useMemo(() => a + b, [a, b]);
```

### ❌ What’s wrong?

* Unnecessary optimization

### 🤔 WHY

* Computation is trivial → overhead > benefit

### ✅ Fix

```js theme={null}
const sum = a + b;
```

### 💡 Best Practice

* Optimize only when measurable

***

## **6. Sorting Mutation Bug**

```js theme={null}
const sorted = useMemo(() => data.sort(), [data]);
```

### ❌ What’s wrong?

* `.sort()` mutates original array

### 🤔 WHY

* Causes hidden state bugs

### ✅ Fix

```js theme={null}
const sorted = useMemo(() => [...data].sort(), [data]);
```

### 💡 Best Practice

* Always avoid mutating inputs

***

## **7. Incorrect Dependency**

```js theme={null}
const value = useMemo(() => compute(a, b), [a]);
```

### ❌ What’s wrong?

* Missing `b` dependency

### 🤔 WHY

* Leads to stale computation

### ✅ Fix

```js theme={null}
const value = useMemo(() => compute(a, b), [a, b]);
```

***

## **8. Infinite Loop via useEffect + useMemo**

```js theme={null}
const config = { limit: 10 };

useEffect(() => {
  fetchData(config);
}, [config]);
```

### ❌ What’s wrong?

* `config` changes every render → effect loops

### 🤔 WHY

* New object reference

### ✅ Fix

```js theme={null}
const config = useMemo(() => ({ limit: 10 }), []);
```

***

## **9. Misunderstanding: Preventing Re-render**

```js theme={null}
useMemo(() => value, [value]);
```

### ❌ What’s wrong?

* Does nothing useful

### 🤔 WHY

* Component still re-renders

### ✅ Fix

* Remove it

### 💡 Best Practice

* `useMemo` ≠ render optimization

***

## **10. Async useMemo Bug**

```js theme={null}
const data = useMemo(async () => {
  const res = await fetch('/api');
  return res.json();
}, []);
```

### ❌ What’s wrong?

* Returns a Promise, not data

### 🤔 WHY

* `useMemo` not designed for async

### ✅ Fix

```js theme={null}
const [data, setData] = useState([]);

useEffect(() => {
  fetch('/api').then(res => res.json()).then(setData);
}, []);
```

***

## **11. Hidden Dependency via Closure**

```js theme={null}
const value = useMemo(() => count * multiplier, [count]);
```

### ❌ What’s wrong?

* `multiplier` missing

### 🤔 WHY

* Closure captures old value

### ✅ Fix

```js theme={null}
[count, multiplier]
```

***

## **12. Expensive Dependency Comparison**

```js theme={null}
const value = useMemo(() => compute(data), [JSON.stringify(data)]);
```

### ❌ What’s wrong?

* Expensive stringification each render

### 🤔 WHY

* Worse than recomputation

### ✅ Fix

* Stabilize `data` upstream

***

## **13. useMemo Inside Loop (Invalid Pattern)**

```js theme={null}
items.map(item => {
  const val = useMemo(() => compute(item), [item]);
  return <Row val={val} />;
});
```

### ❌ What’s wrong?

* Hooks inside loop → violates rules

### 🤔 WHY

* Hook order must be consistent

### ✅ Fix

* Move logic outside loop or inside child

***

## **14. Misplaced Optimization**

```js theme={null}
return <div>{useMemo(() => heavyCompute(), [])}</div>;
```

### ❌ What’s wrong?

* Hook inside JSX

### 🤔 WHY

* Violates hook rules

### ✅ Fix

```js theme={null}
const value = useMemo(() => heavyCompute(), []);
return <div>{value}</div>;
```

***

## **15. Dependency on Function Without Memoization**

```js theme={null}
const value = useMemo(() => compute(fn), [fn]);
```

### ❌ What’s wrong?

* `fn` changes every render

### 🤔 WHY

* Functions are new references

### ✅ Fix

```js theme={null}
const fn = useCallback(() => {...}, []);
```

***

## **16. Misusing useMemo for Constant**

```js theme={null}
const PI = useMemo(() => 3.14, []);
```

### ❌ What’s wrong?

* Useless memoization

### 🤔 WHY

* Constant doesn’t need memoization

### ✅ Fix

```js theme={null}
const PI = 3.14;
```

***

## **17. Incorrect Assumption About Cache Persistence**

```js theme={null}
const value = useMemo(() => compute(), []);
```

### ❌ What’s wrong?

* Assuming it will NEVER recompute

### 🤔 WHY

* React may discard cache (concurrent mode)

### ✅ Fix

* Ensure computation is safe to rerun

***

## **18. Derived State Anti-pattern**

```js theme={null}
const [total, setTotal] = useState(0);

useEffect(() => {
  setTotal(price * qty);
}, [price, qty]);
```

### ❌ What’s wrong?

* Derived state stored unnecessarily

### 🤔 WHY

* Causes extra render

### ✅ Fix

```js theme={null}
const total = useMemo(() => price * qty, [price, qty]);
```

***

# 🚀 Final Insight

These bugs reveal whether someone truly understands:

* React’s **render model**
* **Referential equality**
* **Hook lifecycle constraints**
* **Performance trade-offs**

***

Below are **18 production-grade machine coding problems focused on `useMemo`**, designed at the level expected in **top tech interviews and real-world systems**.

Each problem forces you to think about **render cost, memoization strategy, and data flow architecture** — not just UI.

***

# 🧠 Real-World Machine Coding Problems (useMemo Focus)

***

## **1. Scalable Data Table with Multi-Level Filtering & Sorting**

### 🧩 Requirements

* Render 10k+ rows
* Support:

  * Global search
  * Column filters
  * Multi-column sorting

### 🖥️ UI Behavior

* Instant feedback on filter change
* Sorting toggles (asc/desc)

### 🔄 Data Flow

* `data → filtered → sorted → paginated`

### ⚠️ Edge Cases

* Empty filters
* Multiple filters applied
* Sorting on missing fields

### ⚡ Performance

* Avoid recomputing pipeline on unrelated renders

### 🏗️ Architecture

* Separate transformation steps
* Memoize each stage

### ✅ Approach

```js theme={null}
const filtered = useMemo(() => filterData(data, filters), [data, filters]);
const sorted = useMemo(() => sortData(filtered, sort), [filtered, sort]);
const paginated = useMemo(() => paginate(sorted, page), [sorted, page]);
```

***

## **2. Real-Time Search with Debounce + Highlighting**

### 🧩 Requirements

* Search large text dataset
* Highlight matches

### 🖥️ UI Behavior

* Debounced typing (300ms)
* Highlight matched substrings

### ⚠️ Edge Cases

* Special characters in search
* Empty query

### ⚡ Performance

* Avoid recomputing highlight logic unnecessarily

### 🏗️ Architecture

* `debouncedQuery` state
* Memoize filtered + highlighted result

### ✅ Approach

```js theme={null}
const results = useMemo(() => {
  return data.map(item => highlight(item, debouncedQuery));
}, [data, debouncedQuery]);
```

***

## **3. Virtualized Infinite Scroll Feed**

### 🧩 Requirements

* Load items progressively
* Only render visible items

### 🖥️ UI Behavior

* Smooth scrolling
* Dynamic loading

### ⚠️ Edge Cases

* Fast scrolling
* Empty feed

### ⚡ Performance

* Slice visible items efficiently

### 🏗️ Architecture

* `visibleRange` state

### ✅ Approach

```js theme={null}
const visibleItems = useMemo(() => {
  return items.slice(startIndex, endIndex);
}, [items, startIndex, endIndex]);
```

***

## **4. Complex Pricing Engine (E-commerce)**

### 🧩 Requirements

* Compute final price:

  * Discounts
  * Coupons
  * Taxes

### ⚠️ Edge Cases

* Invalid coupons
* Stackable discounts

### ⚡ Performance

* Avoid recomputation on UI-only updates

### 🏗️ Architecture

* Derived pricing state via memo

### ✅ Approach

```js theme={null}
const finalPrice = useMemo(() => {
  return calculatePrice(cart, coupons, taxRate);
}, [cart, coupons, taxRate]);
```

***

## **5. Role-Based Permission Matrix**

### 🧩 Requirements

* Show permissions grid (users × actions)

### 🖥️ UI Behavior

* Toggle permissions

### ⚠️ Edge Cases

* Inherited roles
* Conflicting permissions

### ⚡ Performance

* Avoid recomputing matrix for each render

### 🏗️ Architecture

* Precompute lookup maps

### ✅ Approach

```js theme={null}
const permissionMap = useMemo(() => {
  return buildPermissionMap(roles);
}, [roles]);
```

***

## **6. Analytics Dashboard with Heavy Aggregations**

### 🧩 Requirements

* Display charts from large dataset
* Aggregate:

  * daily
  * weekly
  * monthly

### ⚡ Performance

* Aggregation is CPU heavy

### 🏗️ Architecture

* Memoize transformed dataset

### ✅ Approach

```js theme={null}
const aggregated = useMemo(() => {
  return aggregateData(rawData, interval);
}, [rawData, interval]);
```

***

## **7. Dynamic Form Builder**

### 🧩 Requirements

* Render forms from schema
* Support conditional fields

### ⚠️ Edge Cases

* Field dependencies
* Dynamic validation

### ⚡ Performance

* Avoid recomputing schema

### 🏗️ Architecture

* Memoize derived form structure

```js theme={null}
const formConfig = useMemo(() => buildForm(schema, values), [schema, values]);
```

***

## **8. Multi-Select Dropdown with Search + Grouping**

### 🧩 Requirements

* Grouped options
* Search filter

### ⚡ Performance

* Large option set (5k+)

### 🏗️ Architecture

* Memoize grouped + filtered options

```js theme={null}
const options = useMemo(() => {
  return groupAndFilter(data, query);
}, [data, query]);
```

***

## **9. Code Editor with Syntax Highlighting**

### 🧩 Requirements

* Highlight code dynamically

### ⚡ Performance

* Regex parsing is expensive

### 🏗️ Architecture

* Memoize tokenized output

```js theme={null}
const tokens = useMemo(() => tokenize(code), [code]);
```

***

## **10. Image Gallery with Dynamic Layout**

### 🧩 Requirements

* Masonry layout
* Responsive resizing

### ⚡ Performance

* Layout calculation expensive

### 🏗️ Architecture

```js theme={null}
const layout = useMemo(() => {
  return computeLayout(images, containerWidth);
}, [images, containerWidth]);
```

***

## **11. Financial Portfolio Tracker**

### 🧩 Requirements

* Calculate:

  * Gains/losses
  * Percent change

### ⚠️ Edge Cases

* Missing prices
* Real-time updates

### ⚡ Performance

* Avoid recomputation on UI-only changes

```js theme={null}
const metrics = useMemo(() => {
  return calculatePortfolio(data);
}, [data]);
```

***

## **12. Chat App Message Grouping**

### 🧩 Requirements

* Group messages by date/user

### ⚡ Performance

* Large message list

```js theme={null}
const groupedMessages = useMemo(() => {
  return groupMessages(messages);
}, [messages]);
```

***

## **13. Advanced Calendar Scheduler**

### 🧩 Requirements

* Compute overlapping events
* Render time slots

### ⚡ Performance

* Complex time calculations

```js theme={null}
const slots = useMemo(() => {
  return computeSlots(events);
}, [events]);
```

***

## **14. Graph Editor (Nodes & Edges)**

### 🧩 Requirements

* Render graph connections

### ⚡ Performance

* Layout calculation expensive

```js theme={null}
const layout = useMemo(() => computeGraph(nodes, edges), [nodes, edges]);
```

***

## **15. Smart Recommendation Engine (Frontend)**

### 🧩 Requirements

* Recommend items based on behavior

### ⚡ Performance

* Scoring algorithm expensive

```js theme={null}
const recommendations = useMemo(() => {
  return computeRecommendations(userData);
}, [userData]);
```

***

## **16. JSON Viewer with Expand/Collapse**

### 🧩 Requirements

* Render deeply nested JSON

### ⚡ Performance

* Parsing expensive

```js theme={null}
const parsed = useMemo(() => parseJSON(data), [data]);
```

***

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

### 🧩 Requirements

* Reorder tasks
* Group by columns

### ⚡ Performance

* Avoid recomputing layout

```js theme={null}
const grouped = useMemo(() => groupTasks(tasks), [tasks]);
```

***

## **18. AI Prompt Builder UI**

### 🧩 Requirements

* Build prompt dynamically from inputs

### ⚠️ Edge Cases

* Missing variables
* Formatting rules

### ⚡ Performance

* String building complex

```js theme={null}
const prompt = useMemo(() => {
  return buildPrompt(inputs);
}, [inputs]);
```

***

# 🚀 Final Architectural Insight

A senior engineer should recognize:

### 🔑 `useMemo` is critical when:

* You have **multi-stage transformations**
* Data size is **large**
* Computation is **non-trivial**
* Referential stability affects **child components**

### ⚠️ But:

* It should be applied **surgically**, not everywhere
* Often combined with:

  * `React.memo`
  * `useCallback`
  * Proper data structures

***

Below are **FAANG-level interview questions on `useMemo`**, designed to test **deep reasoning, trade-offs, and real-world decision-making**.

***

# 🧠 Advanced `useMemo` Interview Questions (Senior Level)

***

## **1. When would you deliberately NOT use `useMemo`, even if a computation is expensive?**

### 🔍 Follow-up

* What if the component renders infrequently?
* What if dependencies change often?

### ✅ Strong Answer

* If renders are rare → memoization overhead not justified
* If dependencies change frequently → cache invalidates anyway
* If memory overhead outweighs CPU savings
* Prefer algorithmic optimization first

### ❌ Weak Answer

* “Always use it for expensive computations”

👉 Fails because it ignores trade-offs and runtime behavior

***

## **2. How would you debug a case where `useMemo` is not improving performance?**

### 🔍 Follow-up

* What tools would you use?
* What metrics matter?

### ✅ Strong Answer

* Use React DevTools Profiler
* Check:

  * Recompute frequency
  * Dependency changes
* Validate:

  * Is computation actually expensive?
  * Are dependencies stable?

### ❌ Weak Answer

* “Add more `useMemo`”

👉 Shows lack of root cause analysis

***

## **3. Explain a situation where `useMemo` introduces a bug instead of fixing performance.**

### 🔍 Follow-up

* How would you detect it?

### ✅ Strong Answer

* Missing dependency → stale data
* Example:

```js theme={null}
useMemo(() => compute(a, b), [a]);
```

* Leads to inconsistent UI

### ❌ Weak Answer

* “It can cause performance issues”

👉 Too vague, not debugging-oriented

***

## **4. How does referential equality impact component re-renders, and how does `useMemo` help?**

### 🔍 Follow-up

* Why is this critical for `React.memo`?

### ✅ Strong Answer

* React compares props by reference
* New object each render → triggers child re-render
* `useMemo` stabilizes reference

### ❌ Weak Answer

* “It caches values”

👉 Doesn’t connect to rendering model

***

## **5. How would you design a data transformation pipeline using `useMemo`?**

### 🔍 Follow-up

* Where would you split memoization?

### ✅ Strong Answer

* Break into stages:

```js theme={null}
filtered → sorted → paginated
```

* Memoize each step independently
* Minimizes recomputation

### ❌ Weak Answer

* “Wrap everything in one `useMemo`”

👉 Reduces flexibility and efficiency

***

## **6. What are the trade-offs of using `useMemo` in a large-scale app?**

### 🔍 Follow-up

* Memory vs CPU trade-off?

### ✅ Strong Answer

* Pros:

  * Reduced computation
* Cons:

  * Memory usage
  * Dependency tracking complexity
  * Debugging difficulty

### ❌ Weak Answer

* “It improves performance”

👉 Ignores cost side

***

## **7. Why is `useMemo` not a guarantee of memoization?**

### 🔍 Follow-up

* How does concurrent rendering affect this?

### ✅ Strong Answer

* React may discard cached values
* Concurrent mode can re-run computations
* It’s an optimization hint, not a contract

### ❌ Weak Answer

* “Because dependencies change”

👉 Incomplete understanding

***

## **8. How would you handle expensive computations that depend on unstable objects?**

### 🔍 Follow-up

* Where would you fix instability?

### ✅ Strong Answer

* Stabilize upstream:

```js theme={null}
const stableObj = useMemo(() => obj, [deps]);
```

* Or normalize data structure

### ❌ Weak Answer

* “Just add it to dependencies”

👉 Doesn’t solve root issue

***

## **9. Compare `useMemo` vs moving computation outside the component.**

### 🔍 Follow-up

* When is each appropriate?

### ✅ Strong Answer

* Outside component:

  * Static logic
* `useMemo`:

  * Depends on props/state
  * Needs reactivity

### ❌ Weak Answer

* “They are the same”

***

## **10. How would you detect overuse of `useMemo` in a codebase?**

### 🔍 Follow-up

* What signals indicate misuse?

### ✅ Strong Answer

* Memoizing trivial values
* Complex dependency arrays
* No measurable performance gain

### ❌ Weak Answer

* “Too many hooks”

👉 Not specific enough

***

## **11. Why is `useMemo` not suitable for async operations?**

### 🔍 Follow-up

* What’s the correct pattern?

### ✅ Strong Answer

* Runs during render → must be synchronous
* Async returns Promise → breaks flow
* Use `useEffect` + state

### ❌ Weak Answer

* “It doesn’t support async”

👉 Lacks reasoning

***

## **12. How does `useMemo` interact with closures?**

### 🔍 Follow-up

* What happens if dependency is missing?

### ✅ Strong Answer

* Captures values at render time
* Missing dependency → stale closure

### ❌ Weak Answer

* “It remembers values”

👉 Oversimplified

***

## **13. When would you prefer algorithmic optimization over `useMemo`?**

### 🔍 Follow-up

* Give an example

### ✅ Strong Answer

* Example:

```js theme={null}
array.includes(x) → O(n)
Set.has(x) → O(1)
```

* Algorithm > memoization

### ❌ Weak Answer

* “When performance is bad”

👉 Not actionable

***

## **14. How would you optimize a component re-rendering due to inline objects?**

### 🔍 Follow-up

* What if object depends on props?

### ✅ Strong Answer

```js theme={null}
const obj = useMemo(() => ({ a }), [a]);
```

* Stabilizes reference

### ❌ Weak Answer

* “Move it outside”

👉 Breaks reactivity

***

## **15. Explain a real-world case where `useMemo` is critical.**

### 🔍 Follow-up

* What happens without it?

### ✅ Strong Answer

* Large dataset filtering
* Without memo:

  * CPU spikes
  * UI lag

### ❌ Weak Answer

* “For performance”

👉 Too generic

***

## **16. How would you refactor a component misusing `useMemo` everywhere?**

### 🔍 Follow-up

* What’s your strategy?

### ✅ Strong Answer

* Remove unnecessary memoization
* Profile first
* Keep only high-impact cases

### ❌ Weak Answer

* “Delete all of them”

👉 Lacks nuance

***

## **17. Can `useMemo` cause memory leaks?**

### 🔍 Follow-up

* In what scenarios?

### ✅ Strong Answer

* Not directly, but:

  * Large cached objects retained
  * Long-lived components → memory growth

### ❌ Weak Answer

* “No”

👉 Oversimplified

***

## **18. How would you ensure correctness when using `useMemo`?**

### 🔍 Follow-up

* Tooling?

### ✅ Strong Answer

* Use ESLint rules (`exhaustive-deps`)
* Ensure pure functions
* Avoid side effects

### ❌ Weak Answer

* “Test it manually”

***

## **19. What’s your mental model for deciding `useMemo` usage?**

### 🔍 Follow-up

* What signals trigger it?

### ✅ Strong Answer

* Ask:

  * Is computation expensive?
  * Is it repeated?
  * Are dependencies stable?

### ❌ Weak Answer

* “Use it when needed”

👉 Not structured

***

## **20. How does `useMemo` fit into overall React performance strategy?**

### 🔍 Follow-up

* What comes before it?

### ✅ Strong Answer

* Order:

  1. Fix unnecessary re-renders
  2. Optimize algorithms
  3. Use `useMemo` as last step

### ❌ Weak Answer

* “It improves performance”

👉 Lacks system thinking

***

# 🚀 Final Insight

A FAANG-level engineer doesn’t just know `useMemo` — they know:

* When it **adds value**
* When it **adds complexity**
* How it fits into **holistic performance strategy**

***