Introduction

When developing React applications, performance is a crucial factor. If rendering is not well-managed, the app can become sluggish, especially with complex components.

Two popular techniques for optimizing rendering performance in React are React.memo and useMemo. They help avoid unnecessary re-renders, improving the overall performance of your application.

1. React.memo – Memoizing a component to prevent unnecessary renders

By default, a child component re-renders whenever its parent renders, even if the props haven’t changed. This can waste resources.

React.memo allows React to "remember" a component and only re-render it when its props actually change.

How to use React.memo

import React from "react";

const Button = React.memo(({ onClick, children }: { onClick: () => void; children: React.ReactNode }) => {
  console.log("Button render");
  return <button onClick={onClick}>{children}</button>;
});

export default function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <Button onClick={() => setCount(count + 1)}>Increase</Button>
    </div>
  );
}

Explanation:

• When App re-renders, the Button component will also re-render by default, even if the props haven't changed.
• React.memo helps prevent this by caching the previous render result and only re-rendering if the props change.
• In the example above, if onClick doesn’t change between renders, the Button won’t re-render.
• This helps reduce unnecessary renders, especially useful for complex or logic-heavy child components.

When should you use React.memo?

• When the child component has expensive rendering logic.
• When the child receives props that don’t change between renders.
• When optimizing performance for large lists or dynamic UIs.

You shouldn't use React.memo for every component. If a component renders quickly, memoization can add unnecessary overhead due to props comparison, which might actually reduce performance.

2. useMemo – Memoizing a value to avoid re-computation

useMemo helps cache computed values and only recomputes them when dependencies change. This is useful for expensive calculations or large data processing.

How to use useMemo

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

function App() {
  const [count, setCount] = useState(0);
  const [number, setNumber] = useState(10);

  const expensiveCalculation = (num: number) => {
    console.log("Calculating...");
    return num * 2;
  };

  // Only re-computes when 'number' changes
  const memoizedValue = useMemo(() => expensiveCalculation(number), [number]);

  return (
    <div>
      <h1>Result: {memoizedValue}</h1>
      <button onClick={() => setNumber(number + 1)}>Increase Number</button>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <p>Count: {count}</p>
    </div>
  );
}

export default App;

Explanation:

• useMemo stores the result of expensiveCalculation(number) and only recomputes it when number changes.
• If only count changes, React uses the previously computed value, helping improve performance.

When should you use useMemo?

• When performing expensive calculations (e.g., filtering a list, mathematical operations).
• When data doesn’t change frequently.
• When component re-renders could slow down the UI.

You shouldn’t use useMemo for simple calculations, as React still needs to check the dependency array.

3. memo vs. useMemo – When to use which?

Conclusion

• Use React.memo to prevent unnecessary re-renders of components.
• Use useMemo to optimize performance for expensive computations.
• Don’t overuse! Only apply them when facing real performance issues to avoid adding unnecessary complexity to your code.