Exploring useMemo, useCallback, and useEffect Hooks in React

Apr 29th 2025

React has revolutionized how developers build interactive UIs with its declarative approach and component-driven architecture. However, performance issues can arise when rendering large or complex applications. Fortunately, React provides powerful hooks, such as useMemo, useCallback, and useEffect, to help optimize performance and handle side effects in a more efficient way.

In this post, we’ll explore these three hooks in detail, understand their purpose, and demonstrate how to use them effectively.

1. `useMemo` : Memoizing Expensive Calculations

The useMemo hook helps prevent expensive calculations from being recomputed on every render. It returns a memoized value, ensuring that it only recomputes when one of its dependencies changes.

Why use `useMemo`?

By default, React re-renders components when state or props change. If your component includes expensive calculations (like sorting, filtering, or complex data manipulation), useMemo can help to optimize performance by memoizing the result. This means that React will only recompute the value when its dependencies change, instead of recalculating on every render.

Basic Syntax

const memoizedValue = useMemo(() => expensiveCalculation(value), [value]);

Here:

expensiveCalculation is a function that performs the heavy computation.
value is the dependency. If value changes, the memoized calculation is recomputed.

Example

Let’s consider a simple component where we filter a large list based on a search term. Without memoization, every keystroke would trigger the filtering logic, leading to unnecessary re-renders.

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

const SearchList = ({ items }) => {
  const [query, setQuery] = useState("");

  // Memoizing the filtered list
  const filteredItems = useMemo(() => {
    return items.filter(item => item.toLowerCase().includes(query.toLowerCase()));
  }, [query, items]);

  return (
    <div>
      <input 
        type="text" 
        value={query} 
        onChange={(e) => setQuery(e.target.value)} 
        placeholder="Search items" 
      />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default SearchList;

When to Use `useMemo`?

Use useMemo for:

Expensive calculations or operations.
Rendering lists or components where expensive transformations happen.

However, it’s important not to overuse useMemo. In many cases, React’s built-in re-rendering mechanism is more than sufficient, and prematurely optimizing with useMemo might lead to unnecessary complexity.

2. `useCallback`: Memoizing Functions

The useCallback hook is similar to useMemo, but it’s specifically used to memoize functions. It helps prevent unnecessary re-creations of functions between renders, especially when these functions are passed down as props to child components.

Why use `useCallback`?

In React, if a function is defined inside a component, it gets recreated on each render. If this function is passed down to child components, they will re-render every time the function is re-created, even if the logic inside the function hasn’t changed. This can hurt performance in large applications.

By using useCallback, you ensure that the function is only re-created when its dependencies change.

Basic Syntax

const memoizedCallback = useCallback(() => {
  // function logic here
}, [dependencies]);

Example

Imagine you have a parent component that passes a callback function to a child. Without useCallback, the child would re-render on every parent render due to the re-creation of the function.

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

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

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

  // Memoizing the function with useCallback
  const incrementCount = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <Child onClick={incrementCount} />
    </div>
  );
};

export default Parent;

in this example:

useCallback ensures that incrementCount is not recreated on every render, thus preventing unnecessary re-renders of the Child component.
React.memo further optimizes rendering of the Child component, only re-rendering when the props (in this case, onClick) change.

When to Use `useCallback`?

Use useCallback when:

Passing functions as props to child components.
Preventing unnecessary re-renders of memoized child components.

3. `useEffect`: Handling Side Effects

The useEffect hook is used to perform side effects in function components. Side effects include tasks like fetching data, subscribing to a service, manually updating the DOM, and timers.

Why use `useEffect`?

In class components, side effects are often managed in lifecycle methods like componentDidMount and componentDidUpdate. In function components, useEffect provides a unified way to handle side effects.

Basic Syntax

useEffect(() => {
  // Side effect logic here
}, [dependencies]);

The function inside useEffect runs after the component renders.
The dependencies array defines when the side effect should run. If it’s empty ([]), the effect runs only once, similar to componentDidMount.

Example

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

const DataFetcher = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        console.error("Error fetching data:", error);
        setLoading(false);
      });
  }, []); // Empty dependency array, runs only once after initial render

  if (loading) return <p>Loading...</p>;
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
};

export default DataFetcher;

When to Use `useEffect`?

Use useEffect for:

Data fetching from APIs.
Handling subscriptions or setting up event listeners.
Updating the DOM or integrating with third-party libraries.

Difference Between `useMemo`, `useCallback`, and `useEffect`

While useMemo, useCallback, and useEffect are all React hooks, they serve distinct purposes, and understanding the differences is crucial to applying them correctly. Let’s break down how they differ:

1. Purpose

`useMemo`:

Purpose: Memoizes the result of a computation or expensive operation so that it’s not recomputed on every render.
Use Case: Prevent unnecessary recalculations of a value when dependencies (such as props or state) don’t change.

`useCallback`:

Purpose: Memoizes a function definition itself, ensuring that it is not recreated on every render unless dependencies change.
Use Case: Prevent unnecessary re-creations of functions, especially when they are passed as props to child components or used in event handlers.

`useEffect`:

Purpose: Handles side effects (like data fetching, subscriptions, or manual DOM manipulation) after the component renders. It replaces lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount in class components.
Use Case: Used for performing side effects and for synchronizing with external systems like APIs, event listeners, or timers.

2. Return Value

`useMemo`:

Returns the memoized value of the calculation, which can be used in the component’s render.

`useCallback`:

Returns the memoized function, ensuring the same reference to the function across renders unless its dependencies change.

`useEffect`:

Returns nothing directly. It runs the side-effect function after the render cycle and optionally returns a cleanup function to clean up side effects (like clearing timers or unsubscribing from services).

3. Dependencies

`useMemo`:

The hook only recomputes the memoized value if one of its dependencies changes. If the dependencies don’t change, it returns the previously memoized value.

`useCallback`:

The hook only creates a new function if one of its dependencies changes. Otherwise, it returns the same function reference from previous renders.

`useEffect`:

The hook runs after the render cycle and can be controlled with a dependency array. If the array is empty, the effect runs once after the first render, similar to componentDidMount. If dependencies are provided, the effect runs whenever the dependencies change.

4. When to Use

`useMemo`:

When you want to avoid re-calculating expensive operations unless necessary. For example, memoizing filtered lists, sorted data, or complex computations.

`useCallback`:

When you want to ensure a function doesn’t get recreated unnecessarily, especially when passing the function down as props to child components. This helps in preventing unnecessary re-renders of child components (especially if they are wrapped in React.memo).

`useEffect`:

When you need to perform side effects like fetching data, setting up subscriptions, or interacting with external APIs. It’s ideal for dealing with asynchronous operations or any effects that should occur after the render.

5. Examples of Use Cases

Hook	Use Case Example
`useMemo`	Optimizing rendering of a filtered list of items based on user input, without recalculating it on every render.
`useCallback`	Preventing a function from being recreated on every render and passing it down to memoized child components.
`useEffect`	Fetching data from an API when a component mounts and cleaning up after the component unmounts (e.g., clearing intervals).

6. Performance Impact

`useMemo`:

Helps improve performance by memoizing expensive computations. However, it can introduce a performance overhead due to the need to compare dependencies. Use only when the computation is genuinely expensive.

`useCallback`:

Prevents unnecessary function recreations. However, just like useMemo, excessive use can hurt performance if the dependencies change frequently or if the function is lightweight.

`useEffect`:

Helps with handling side effects without blocking the render process. It doesn’t directly optimize performance but can improve the user experience by offloading heavy tasks from the main thread.

Summary of Differences:

Feature	`useMemo`	`useCallback`	`useEffect`

Purpose

Memoize values

Memoize functions

Handle side effects

Return Value

Memoized value

Memoized function

No return value (can return cleanup function)

Usage

Expensive calculations

Functions passed as props

Side effects, like data fetching or DOM manipulation

Dependencies

Recomputes when dependencies change

Function is recreated when dependencies change

Runs when dependencies change

Performance Focus

Prevent unnecessary recalculation

Prevent unnecessary function recreation

Handle side effects asynchronously

Conclusion

useMemo and useCallback are both used to optimize performance by preventing unnecessary recalculations and re-creations of values and functions, respectively.
useEffect deals with handling side effects and is an essential tool for integrating external operations into React’s render cycle.

Using these hooks properly in your React application will allow you to optimize performance, handle side effects effectively, and ensure your app runs efficiently even as it scales.

Tags:

Comments:

Exploring useMemo, useCallback, and useEffect Hooks in React

Table of Contents

1. useMemo : Memoizing Expensive Calculations

Why use useMemo?

Basic Syntax

Example

When to Use useMemo?

2. useCallback: Memoizing Functions

Why use useCallback?

Basic Syntax

Example

When to Use useCallback?

3. useEffect: Handling Side Effects

Why use useEffect?

Basic Syntax

Example

When to Use useEffect?

Difference Between useMemo, useCallback, and useEffect

1. Purpose

useMemo:

useCallback:

useEffect:

2. Return Value

useMemo:

useCallback:

useEffect:

3. Dependencies

useMemo:

useCallback:

useEffect:

4. When to Use

useMemo:

useCallback:

useEffect:

5. Examples of Use Cases

6. Performance Impact

useMemo:

useCallback:

useEffect:

Summary of Differences:

Conclusion

Featured Insights

Subscribe to Newsletter

Follow Us

Categories

Tags

1. `useMemo` : Memoizing Expensive Calculations

Why use `useMemo`?

When to Use `useMemo`?

2. `useCallback`: Memoizing Functions

Why use `useCallback`?

When to Use `useCallback`?

3. `useEffect`: Handling Side Effects

Why use `useEffect`?

When to Use `useEffect`?

Difference Between `useMemo`, `useCallback`, and `useEffect`

`useMemo`:

`useCallback`:

`useEffect`:

`useMemo`:

`useCallback`:

`useEffect`:

`useMemo`:

`useCallback`:

`useEffect`:

`useMemo`:

`useCallback`:

`useEffect`:

`useMemo`:

`useCallback`:

`useEffect`: