How does React’s useMemo hook help performance, and what are the common mistakes when using it?

 Awesome follow-up! useMemo can definitely help with performance—but only if used correctly. Let's break it down:

What useMemo Does

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• It memoizes (remembers) the result of a function.

• Only recomputes when dependencies change.

• Avoids unnecessary re-runs of expensive calculations on every render.

So, it helps with:

• Heavy computations.

• Avoiding re-renders of components when props haven't actually changed.

• Stabilizing references (e.g. objects/arrays/functions) passed as props to children.

🧠 Common Use Cases

• Calculating derived data from props or state.

• Preventing re-renders when passing stable values to useEffect, React.memo components, etc.

• Memoizing options/configs (e.g. chart settings, select dropdowns).

🚫 Common Mistakes

1. Using it prematurely ("premature optimization")

   • Don’t use useMemo just to avoid re-running simple logic.

   • Example of overkill:

     const doubled = useMemo(() => num * 2, [num]); // 😬 unnecessary
     

2. Ignoring dependencies

   • If your dependency array is incomplete, you'll get stale values.

     const result = useMemo(() => doSomething(x), []); // ❌ x isn’t in deps
     

3. Using it for side effects

   • useMemo should be pure—no side effects like API calls or state updates.

   • Use useEffect for that instead.

4. Expecting it to prevent re-renders

   • useMemo memoizes a value, not a component.

   • Use React.memo for memoizing components.

5. Stabilizing functions? Use useCallback

   • If you're memoizing a function, useCallback is usually better:

     jsx
     const handleClick = useCallback(() => doSomething(id), [id]);

✅ When It's Worth It

• You're doing expensive calculations (e.g., filtering, sorting, large data sets).

• You're passing objects/functions as props to children wrapped in React.memo.

• You're experiencing performance bottlenecks from unnecessary recalculations.