When should you use useMemo?

When should you use useMemo?

• A. To manage state.
• B. To memoize expensive calculations and avoid re-computation unless dependencies change.
• C. To handle DOM events.
• D. To render lists with keys.

Answer: (B)

useMemo is used to memoize a computed value so heavy calculations inside render run only when their dependencies change. This helps avoid re-running expensive work on every render, reusing the previous result if a or b (the dependencies) haven’t changed. For example, const result = useMemo(() => expensiveCalc(a, b), [a, b]); will recompute only when a or b changes. It’s not for managing state or handling DOM events, and it doesn’t control how lists are rendered with keys. Remember, memoization helps with costly calculations, but add it only when you’ve identified a real performance bottleneck, since memoizing things unnecessarily can add overhead.

useMemo is used to memoize a computed value so heavy calculations inside render run only when their dependencies change. This helps avoid re-running expensive work on every render, reusing the previous result if a or b (the dependencies) haven’t changed. For example, const result = useMemo(() => expensiveCalc(a, b), [a, b]); will recompute only when a or b changes. It’s not for managing state or handling DOM events, and it doesn’t control how lists are rendered with keys. Remember, memoization helps with costly calculations, but add it only when you’ve identified a real performance bottleneck, since memoizing things unnecessarily can add overhead.