Open In App

When to use React.memo() over useMemo() & vice-versa ?

Last Updated : 22 Mar, 2024
Like Article

React provides us with powerful tools to optimize the performance of our applications. Two such tools are `React.memo()` and `useMemo()`, which serve similar yet distinct purposes.

In this article, we’ll explore when to use `React.memo()` over `useMemo()` and vice versa, along with syntax and code examples to illustrate their usage.


`React.memo()` is a higher-order component (HOC) provided by React. It’s used to memoize the rendering of functional components based on their props. This means that React will re-render the component only if its props have changed since the last render.

Syntax of React.memo():

const MemoizedComponent = React.memo((props) => {
// Component logic here


`useMemo()` is a React hook used to memoize the result of expensive computations within functional components. It accepts a function and an array of dependencies. The result of the function is memoized until one of the dependencies changes.

Syntax of useMemo:

const memoizedValue = useMemo(() => {
// Expensive computation
}, [dependency1, dependency2, ...]);

Choosing Between React.memo() and useMemo():


React.memo( )

useMemo( )


Used to memoize components.

Used to memoize values.


Wraps a React component, preventing re-renders if props have not changed.

Called inside a React component to memoize expensive calculations.

Type of Memoization

Shallow comparison of props by default, but can accept a custom comparison function.

Memoizes any calculated value, including objects, arrays, and other data types.

When to Use

When a component frequently re-renders with the same props.

To optimize performance by avoiding expensive calculations on every render.


At the component level for preventing re-renders.

Inside a component to memoize specific values or computations.

Example Use Case

Memoizing a list item component in a large list to prevent unnecessary re-renders of all list items when one item changes.

Memoizing the result of a filter or sort operation on a list to avoid recalculating the list on every render.

Syntax Example


const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Example of React.memo() & useMemo:

Example: Below is the example of TodoList with React.memo() based on todos prop to prevent unnecessary re-renders. Use useMemo() for TodoItem to optimize completion status computation based on todo.completed, avoiding redundant recalculations.

// src/App.js
import React, { useState } from 'react';
import TodoList from './TodoList';

const App = () => {
    const [todos, setTodos] = useState([
        { id: 1, text: 'Learn React', completed: false },
        { id: 2, text: 'Build a Todo App', completed: true },
        { id: 3, text: 'Master React Hooks', completed: false }

    const [count, setCount] = useState(0);
    const [inputText, setInputText] = useState("");

    const toggleTodo = (id) => {
        setTodos( =>
   === id ?
                { ...todo, completed: !todo.completed } :

    const handleAdd = () => {
        // Create a new todo object with a unique ID
        const newTodo = {
            id: todos.length + 1,
            text: inputText,
            completed: false
        // Update todos state with the new todo
        setTodos([...todos, newTodo]);
        // Clear input field after adding todo

    return (
            <h1>Todo List</h1>
            <TodoList todos={todos} />
            <button onClick={() => toggleTodo(1)}>
                Toggle Todo 1
                placeholder='Add todo'
                // Update inputText state
                onChange={(e) => setInputText(} />
            <button onClick={handleAdd}>Add</button>
            <button onClick={
                () =>
                    setCount(count + 1)

export default App;

import React from 'react';
import TodoItem from './TodoItem';

const TodoList = ({ todos }) => {
    console.log('TodoList rendered');

    return (
            { => (
                <TodoItem key={} todo={todo} />

export default React.memo(TodoList);
// src/TodoItem.js

import React, { useMemo } from 'react';

const TodoItem = ({ todo }) => {
    const completed = useMemo(() => {
            `Computing completion 
            status for todo "${todo.text}"`
            `This is only called for
             the todo which is changed`
        return todo.completed ?
            'Completed' :
    }, [todo]);

    return (
            <input type="checkbox"
                checked={todo.completed} readOnly />

export default TodoItem;



Output for Todo

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads