🔴▶️ Prefer watching instead?

I break all of this down with real examples and a live demo in my YouTube video.

👉 Watch the full video on useMemo here

(Don’t forget to like & subscribe if it helps you!)

Performance in React matters — especially as your app grows in size and complexity. One of the hooks that can help you optimize rendering and reduce costly recalculations is useMemo. In this post, we’ll dive into what it does, why it matters, and when it’s worth using.

🧠 What is useMemo?

According to the official React docs:

"useMemo is a React Hook that lets you cache the result of a calculation between re-renders."

When a component re-renders, everything inside it is recalculated — including variable assignments and function executions. With useMemo, you can prevent expensive calculations from running on every render and only recalculate them when their dependencies actually change.

⚠️ Note: useMemo is about memoizing values, not functions. For functions, check out useCallback.

💡 Common Use Cases

1. Skipping Expensive Recalculations

If you have a resource-intensive or time-consuming operation — like filtering a large dataset — use useMemo to ensure that operation only runs when necessary.

const expensiveResult = useMemo(() => {
  return largeArray.filter(item => complexCalculation(item));
}, [largeArray]);

✅ This ensures the filtering logic only runs when largeArray changes.

2. Preventing Unnecessary Re-renders

When passing props (like objects or arrays) to memoized child components, changes in reference (even if content stays the same) can trigger re-renders.

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

const ExpensiveComponent = React.memo(({ data }) => {
  return <div>{/* Render with data */}div>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState([1, 2, 3]);

  const memoizedData = useMemo(() => data, [data]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}button>
      <ExpensiveComponent data={memoizedData} />
    div>
  );
}

📌 Here, ExpensiveComponent only re-renders when data actually changes.

3. Preventing Effects from Running Too Often

Sometimes useEffect dependencies can cause the effect to fire unnecessarily. useMemo helps stabilize values that don’t need to change often.

import React, { useState, useEffect, useMemo } from 'react';

function MyComponent({ data }) {
  const [count, setCount] = useState(0);

  const expensiveComputation = useMemo(() => {
    return data.map(item => item * 2);
  }, [data]);

  useEffect(() => {
    console.log('Effect ran');
    // Do something with expensiveComputation
  }, [expensiveComputation]);

  return (
    <div>
      <p>Count: {count}p>
      <button onClick={() => setCount(count + 1)}>Incrementbutton>
    div>
  );
}

🧠 In this case, the effect only runs when data changes, keeping things efficient.

🧠 Final Thoughts

useMemo is a great tool to help you optimize performance, but don’t reach for it blindly. Always measure and test your components first — and only introduce memoization when you see real benefits.

✅ When to Use useMemo

  • You’re doing heavy computations in your component.
  • You’re passing props to memoized child components and want to avoid re-renders.
  • You want to optimize hook dependencies in useEffect or useCallback.

❌ When Not to Use It

  • Your computation is lightweight and renders fast.
  • You're using it just in case without measuring performance.
  • You're optimizing before knowing there's a real performance issue (premature optimization 🔧).

You made it to the end — you're the real MVP.

Now go do some dev magic ✨
See you in the next post 👋