DEV Community

Cover image for 🔍 Deep Dive into useMemo in React.js: Optimize Performance Like a Pro
WebTechnology Tutorials
WebTechnology Tutorials

Posted on • Originally published at webcodingwithankur.blogspot.com

🔍 Deep Dive into useMemo in React.js: Optimize Performance Like a Pro

#react #javascript #performance #reacthooks

React is blazing fast, but as your app scales, performance issues like unnecessary re-renders and repeated calculations can sneak in. That’s where the useMemo Hook becomes your secret weapon.

✅ In this post, you'll learn:

  • What is useMemo in React?
  • Why and when to use it
  • Real-world analogies
  • Optimization use cases with child components
  • Code examples and diagrams

🧠 What is useMemo?

useMemo is a React Hook that memoizes the result of a function, meaning it will only re-run the computation when its dependencies change.

Example syntax:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
Enter fullscreen mode Exit fullscreen mode

It helps avoid recomputing things unnecessarily and boosts performance, especially in large React apps.

🎯 Why use useMemo?

React re-renders on every state or prop change. That means:

  • Expensive calculations may re-run every time
  • Child components may re-render even with the same data
  • Object and function references get recreated, causing unnecessary changes

useMemohelps by:

  • Improving performance
  • Keeping references stable
  • Preventing unnecessary child re-renders

🚀 When should you use it?

Use useMemo when:

  • You have expensive computations
  • You're passing filtered or derived data to child components
  • You want to keep prop references stable

But don’t use it everywhere — only where it's needed. Overusing useMemo can actually reduce performance due to memory and complexity overhead.

📊 Real-World Example: Factorial Calculator

Let’s memoize a factorial calculation:

const factorial = (n) => {
  console.log('Calculating...');
  if (n === 0) return 1;
  return n * factorial(n - 1);
};

const result = useMemo(() => factorial(number), [number]);
Enter fullscreen mode Exit fullscreen mode

Without useMemo, the factorial would re-run every time the component re-renders. This optimization avoids that.

👶 Child Component Optimization

Example of stabilizing props passed to a memoized child component:

const filteredItems = useMemo(() => {
  return items.filter(item => item.includes(query));
}, [query]);

<ChildComponent data={filteredItems} />
Enter fullscreen mode Exit fullscreen mode

This avoids unnecessary re-renders in ChildComponent.

🔄 useMemo vs useCallback

| Hook          | What it Memoizes       | Best For                   |
| ------------- | ---------------------- | -------------------------- |
| `useMemo`     | The return value       | Expensive computed values  |
| `useCallback` | The function reference | Stable event handler props |
Enter fullscreen mode Exit fullscreen mode

🙋‍♂️ Frequently Asked Questions

Q: Does useMemo always improve performance?
A: No. It’s useful only when there are expensive operations or frequent renders.

Q: Can it be used with async functions?
A: No. useMemo is synchronous. Use useEffect or a data-fetching library for async behavior.

Q: How to track when it works?
A: Use React DevTools to monitor re-renders and props.

🎬 Watch Video Tutorial
Watch this topic explained on YouTube:
👉 https://youtu.be/7opz5TfYyws

📌 Read Full Blog Post with HTML, code formatting, and visuals:
👉 https://webcodingwithankur.blogspot.com/2025/06/usememo-in-react-performance-optimization.html

Top comments (0)