DEV Community

React.memo() is your friend

therealnrf on December 22, 2021

React.memo() is one of those things that should be a part of every React developer's arsenal. It gives us the ability to memoize a React component....

Read full post

Popov Anton • Dec 24 '21

But isn't React.memo making us a disservice, obfuscating our questionable design decisions? Like in this case we can extract all counting logic into a separate Counter component and actually fix the problem instead of sweeping it under React.memo rug.

therealnrf • Dec 24 '21

In this case sure but this is just an example to keep things simple.

findream • Dec 23 '21

Thank you, the post is very useful. If we use memo in every child component, will there be any other problem? What do you think about the fact that some developers and articles recommend that use fewer hooks like 'useCallback'、'memo'？

therealnrf • Dec 23 '21

There shouldn't be any problem per se if every child component is memoized but something like that is generally not recommended. Unless of course you run into a scenario where it makes sense to do it i.e. you have child components doing some heavy lifting but giving the same result.

useCallback and useMemo (which are equivalent with a slight difference in syntax by the way) do the same thing in that they memoize the result of a function call but, being hooks, they're restricted to be used from within a functional component. React.memo() is much more flexible. In fact, it is extremely common to have a separate file for your component and memoize it just before exporting it. Something like this:

export default React.memo(Message);

Tarun Soni • Dec 24 '21

Here's a great article for when to use useMemo and useCallback - kentcdodds.com/blog/usememo-and-us...

Let's Code • Dec 23 '21

great post! small typo on dicate => dictate that can be corrected easily

therealnrf • Dec 23 '21

Thanks!

Uwem • Dec 26 '21

This really helped improve my react native app. Thanks

therealnrf • Dec 26 '21

Glad to hear that!

Honza • Dec 27 '21

Thank you, I finally got it! Is React.memo() the same as React.useMemo()? If so, how does React.useMemo() compare to React.useCallback()?

therealnrf • Dec 28 '21 • Edited

React.memo() is different in that it expects a React component and will compare that component's props to decide whether to re-evaluate the component or not. useMemo() and useCallback() are hooks that watch a dependency array to decide whether to re-evaluate a given function or not.

While specific use-cases for useMemo() and useCallback() can be argued, they're more or less equivalent with a slightly different syntax.