SamwithCode

react memo vs use memo in react js 2025

React.memo vs useMemo in React JS 2025

In React, both React.memo and useMemo are optimization tools to prevent unnecessary rendering or computation, but they work differently and are used in different scenarios.

1. React.memo – For Component Re-render Prevention

It is a higher-order component that prevents re-rendering of a functional component if its props have not changed.


// MyComponent.js
import React from "react";

const MyComponent = ({ name }) => {
  console.log("Rendered MyComponent");
  return 
Hello {name}
;
};

export default React.memo(MyComponent);

Now this component will only re-render if the name prop changes.

2. useMemo – For Expensive Calculation Memoization

It is a hook that memoizes the result of a computation, so it doesn’t get recalculated on every render unless dependencies change.


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

function ExpensiveComponent({ number }) {
  const [count, setCount] = useState(0);

  const expensiveValue = useMemo(() => {
    console.log("Calculating...");
    let total = 0;
    for (let i = 0; i < 100000000; i++) {
      total += i;
    }
    return total + number;
  }, [number]);

  return (
    

      
Expensive Result: {expensiveValue}

      
    

  );
}

🧠 Key Differences

  • React.memo is used to memoize entire components.
  • useMemo is used to memoize values or results of functions inside components.
  • React.memo checks props; useMemo uses dependency arrays.

✅ When to Use

  • Use React.memo when a component gets re-rendered unnecessarily due to unchanged props.
  • Use useMemo when there’s an expensive calculation or to avoid recreating functions/objects on each render.