Lesson 29 — React.memo, useMemo & useCallback Explained (Performance Optimization)

🧭 Introduction

As React applications grow, unnecessary re-renders can slow down performance and make the UI feel laggy. Even when data hasn’t changed, components may still re-render due to how React works.

To optimize performance, React provides three powerful tools:

• React.memo
• useMemo
• useCallback

In this lesson, you will learn:

• Why unnecessary re-renders happen
• How React.memo, useMemo, and useCallback work
• When to use each one
• Real-world examples
• Best practices and FAQs

❓ Why Performance Optimization is Needed in React?

By default, when a parent component re-renders, all its child components re-render too, even if their props didn’t change.

This can cause:
❌ Slower UI
❌ Unnecessary calculations
❌ Wasted rendering cycles

Performance optimization helps React:
✅ Re-render only when necessary
✅ Improve speed and user experience

🧠 Understanding Re-renders (Important Concept)

A component re-renders when:

• Its state changes
• Its props change
• Its parent re-renders

Optimization tools help skip re-renders when nothing meaningful has changed.

🧩 React.memo — Prevent Unnecessary Re-renders

🔹 What is React.memo?

React.memo is a higher-order component that:

Prevents a functional component from re-rendering if its props have not changed.

📄 Without React.memo (Problem)

const Child = ({ value }) => {
  console.log("Child rendered");
  return <p>Value: {value}</p>;
};

Even if value doesn’t change, Child re-renders when parent re-renders ❌

📄 With React.memo (Solution)

const Child = React.memo(({ value }) => {
  console.log("Child rendered");
  return <p>Value: {value}</p>;
});

✔ Child re-renders only when value changes
✔ Improves performance

⚠ When to Use React.memo?

✅ Pure functional components
✅ Components with heavy UI
✅ Components that receive stable props

❌ Don’t use everywhere (can add overhead)

🧠 useMemo — Memoize Expensive Calculations

🔹 What is useMemo?

useMemo:

Memorizes the result of a calculation so it doesn’t run again unless dependencies change.

📄 Problem Example (Expensive Calculation)

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {}
  return num * 2;
};

❌ Without useMemo

const result = expensiveCalculation(number);

Runs on every render 😖

✅ With useMemo

import { useMemo } from "react";

const result = useMemo(() => {
  return expensiveCalculation(number);
}, [number]);

✔ Runs only when number changes
✔ Faster rendering

🧠 useCallback — Memoize Functions

🔹 What is useCallback?

useCallback:

Returns a memoized function that doesn’t get recreated on every render.

❌ Problem Example

const handleClick = () => {
  console.log("Clicked");
};

Functions are recreated on every render, causing child components to re-render ❌

✅ With useCallback

import { useCallback } from "react";

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

✔ Function reference stays the same
✔ Prevents unnecessary child re-renders

🧩 Real-World Example: Parent & Child Optimization

📄 Parent.jsx

import { useState, useCallback } from "react";
import Child from "./Child";

const Parent = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  return (
    <>
      <h2>Count: {count}</h2>
      <Child onClick={handleIncrement} />
    </>
  );
};

export default Parent;

📄 Child.jsx

import React from "react";

const Child = React.memo(({ onClick }) => {
  console.log("Child rendered");
  return <button onClick={onClick}>Increment</button>;
});

export default Child;

✔ Child renders only once
✔ Parent updates without affecting child

🆚 React.memo vs useMemo vs useCallback

⚠ Common Mistakes

❌ Overusing optimization hooks
❌ Forgetting dependency arrays
❌ Using useMemo for simple values
❌ Premature optimization

🎯 Best Practices

✅ Optimize only when needed
✅ Use React DevTools to detect re-renders
✅ Start simple, then optimize
✅ Combine tools wisely

❓ FAQs — Performance Optimization

🔹 Does React.memo improve performance always?

No. It helps only when re-renders are unnecessary and props are stable.

🔹 Is useMemo same as useCallback?

No. useMemo memoizes values, useCallback memoizes functions.

🔹 Should beginners use these hooks?

Yes, but only after understanding re-renders clearly.

🔹 Can overuse harm performance?

Yes. Memoization itself has a cost.

🧠 Quick Recap

✔ React re-renders often by default
✔ React.memo prevents unnecessary renders
✔ useMemo optimizes expensive calculations
✔ useCallback stabilizes function references

🎉 Conclusion

Performance optimization is a critical skill for professional React developers. By mastering React.memo, useMemo, and useCallback, you can build fast, efficient, and scalable React applications.

This lesson marks your entry into advanced React optimization techniques 🚀

👉 Next Lesson (SECTION 6):
Lesson 30 — Code Splitting & Lazy Loading in React