React.memo vs. useMemo
Kristiyan Velkov
Tech Lead ? Front-End Advocate ? Mentor & Educator ? Tech Blogger ? Published Author ? 100+ IT Certifications ? 30K+ Followers ? Expert in React.js, Next.js, Angular, DevOps, Web Accessibility & Security
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.
Software Development Engineer 2 | Full Stack Development @ Planview
1 年Good One
Front-end Developer | React.js | Next.js | TypeScript
1 年It Was Helpful , Thank You.
Software Developer ? React Native ? Flutter ? Javascript ? Dart ? Firebase ? Redux toolkit ? Java ? React.js ? Vue.js ? HTML ? CSS ? Cypress ? Unit Testing ? Strapi
1 年Good Explanation.
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.