How To Use useMemo Hook In React? See Example

What Is useMemo Hook?

The useMemo hook memoizes the result of a computation so that it is only recalculated when dependencies change.
It is useful for expensive calculations in functional components.

---

Basic Syntax

const memoizedValue = useMemo(() => computeValue(), [dependencies]);

• memoizedValue → cached result
• dependencies → array controlling when to recompute

---

Example: Expensive Calculation

import React, { useState, useMemo } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(0);

  const expensiveCalculation = (n) => {
    console.log("Calculating...");
    let result = 0;
    for (let i = 0; i < 100000000; i++) result += n;
    return result;
  };

  const memoizedResult = useMemo(() => expensiveCalculation(num), [num]);

  return (
    <div>
      <input type="number" value={num} onChange={e => setNum(+e.target.value)} />
      <p>Result: {memoizedResult}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
    </div>
  );
}

✅ expensiveCalculation only runs when num changes, not on every render.

---

Key Points

• Optimizes expensive computations
• Prevents unnecessary recalculation on each render
• Works with dependency array to control updates
• Combine with useCallback for full performance optimization

---

Conclusion

useMemo is vital for performance optimization in React functional components, especially with heavy computations.

---

Citations

https://savanka.com/category/learn/react/
https://www.w3schools.com/REACT/DEFAULT.ASP