React.memo vs. useMemo

React.memo vs. useMemo

Memo

Memo lets you skip re-rendering a component when its props are unchanged.

import { memo } from 'react';



const SomeComponent = memo(function SomeComponent(props) {

  // ...

});        

Wrap a component in memo to get a memoized version of that component. This memoized version of your component will usually not be re-rendered when its parent component is re-rendered as long as its props have not changed.

Usage?

!!! Skipping re-rendering when props are unchanged



useMemo

useMemo is a React Hook that lets you cache the result of a calculation between re-renders.

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  // ...
}        

Usage?

!!! Skipping expensive recalculations?

To cache a calculation between re-renders, wrap it in a useMemo call at the top level of your component:

import { useMemo } from 'react';

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}        

On every subsequent render, React will compare the dependencies with the dependencies you passed during the last render. If none of the dependencies have changed (compared with Object.is), useMemo will return the value you already calculated before. Otherwise, React will re-run your calculation and return the new value.

In other words, useMemo caches a calculation result between re-renders until its dependencies change.



Difference between memo and useMemo()

Memo and useMemo() are both used in React for performance optimization, but they serve different purposes.

Memo is a higher-order component that is used to memoize a component, which means it caches the output of the component and only re-renders it if its props have changed. This can be useful when a component's rendering is expensive, and you want to avoid unnecessary re-renders. Memo can be imported from 'react' and wrapped around a functional component.

useMemo() is a hook that lets you cache the result of a calculation between re-renders. It takes a function and an array of dependencies as input and returns a cached value that will be re-used between renders as long as the dependencies do not change. This is useful when you have a computation that is expensive and needs to be run only when its dependencies change.

In summary, Memo is used for caching an entire component, while useMemo() is used for caching a specific calculation or value. Memo caches a component's output based on its props, while useMemo() caches a value based on its dependencies.


Author
Kashyap S P

Software Development Engineer 2 | Full Stack Development @ Planview

1 年

Good One

回复
Ziba Irani

Front-end Developer | React.js | Next.js | TypeScript

1 年

It Was Helpful , Thank You.

回复
SURAJ KUMAR GUPTA

Software Developer ? React Native ? Flutter ? Javascript ? Dart ? Firebase ? Redux toolkit ? Java ? React.js ? Vue.js ? HTML ? CSS ? Cypress ? Unit Testing ? Strapi

1 年

Good Explanation.

回复
Dimitar Mihov

Senior Software Engineer | Full-Stack React .NET at DormaKaba Group

1 年

But always remember: if any of the props is object/array then React.Memo won't really work (it does shallow comparison) however you could define customer comparer. But if there are many too deeply nested objects as props.. good luck.

要查看或添加评论,请登录

Kristiyan Velkov的更多文章

  • Where you can find my blog posts in 2025

    Where you can find my blog posts in 2025

    In 2025, you can explore all my curated lists on Medium, where I cover a variety of topics to help developers and tech…

  • Mastering TypeScript Core Utility Types

    Mastering TypeScript Core Utility Types

    The Ultimate Guide from Beginner to Pro: 300+ Examples, Practical Exercises, and Best Practices for Mastering Advanced…

    2 条评论
  • Next.js CLI Turbo

    Next.js CLI Turbo

    It’s a powerful command-line interface tool that I’ve developed to accelerate the development process of Next.js 13/14…

  • React JS is just a dependency in the 2024

    React JS is just a dependency in the 2024

    React JS is a popular library but more and more rely on the framework Next.js.

  • Client-Side Rendering is Just OK!

    Client-Side Rendering is Just OK!

    The web development landscape is constantly evolving, and as we navigate through the ever-changing tides of technology,…

    1 条评论
  • React JS?-?Security Best Practices

    React JS?-?Security Best Practices

    Front-end security refers to the practices and measures taken to secure the user interface and client-side components…

  • Stop using npm to install node_modules

    Stop using npm to install node_modules

    PNPM saves disk space, boosts installation speed, and creates a non-flat node_modules directory. What is pnpm ? Pnpm is…

  • Mastering React JS SOLID Principles - Single-responsibility Principle

    Mastering React JS SOLID Principles - Single-responsibility Principle

    What are SOLID principles? SOLID principles are five design principles that help us keep our application reusable…

    3 条评论
  • AI will NOT replace front-end developers!

    AI will NOT replace front-end developers!

    Introduction AI, or Artificial Intelligence, refers to the simulation of human intelligence in machines that are…

    3 条评论
  • React JS - Naming convention

    React JS - Naming convention

    In computer programming, a naming convention is a set of rules for choosing the character sequence to be used for…

    2 条评论

社区洞察

其他会员也浏览了