DEV Community

Cover image for Introduction to React.memo, useMemo and useCallback

Introduction to React.memo, useMemo and useCallback

TrinhDinhHuy on November 06, 2019

Prerequisite: Basic knowledge about React Cover photo by Danika Perkinson on Unsplash When I start to write this blog, I ask myself w...
Collapse
 
netochaves profile image
Neto Chaves

Hi TrinhDinhHuy great post, really helped me to understand about memoization on react.

Just a typo, on Counter component that u render a button, you're closing this buttton with div and not a button tag.

Keep writing!

Collapse
 
kibobishtrudelz profile image
Petar Kolev

React.memo() is a HOC. You can use it with class components as well with functional ones. It's not true that it comes handy only on functional components. useMemo i a hook and it goes only to functional components.

Collapse
 
anhnguyenvanagilityio profile image
anh.nguyenvan • Edited

Thanks for shared, it's very helpful, but i have a case, can you please help me clear
blog.axlight.com/posts/four-patter...

const App = props => {
const [stateA, dispatchA] = useReducer(reducerA, initialStateA);
const [stateB, dispatchB] = useReducer(reducerB, initialStateB);
const [stateC, dispatchC] = useReducer(reducerC, initialStateC);
const valueA = useMemo(() => [stateA, dispatchA], [stateA]);
const valueB = useMemo(() => [stateB, dispatchB], [stateB]);
const valueC = useMemo(() => [stateC, dispatchC], [stateC]);
return (



{props.children}



);
};
how the useMemo work? many thanks

Collapse
 
jvinhit profile image
Vinh Nguyen

wow :D thankiu "Bác Huy"

Collapse
 
redraushan profile image
Raushan Sharma

Hi TrinhDinhHuy, well put buddy, it helped me to clear out a few doubts that I had.

Moreover, I guess there's a type in the following code:

const myReply = React.memo(() => decideWhatToSay (girlFriendWords), [girlFriendWords])

I feel, instead of React.memo, it should be React.useMemo.

Keep writing!

Collapse
 
dinhhuyams profile image
TrinhDinhHuy

Thank you! I updated it

Collapse
 
gaurbprajapati profile image
gaurbprajapati

One of the great post wow

Collapse
 
ardyfeb profile image
Ardy Febriansyah

Will useCallback useless if passed to children that not using React.memo?

Collapse
 
trangchongcheng profile image
cucheng

Hi Huy,
Do you think about React.memo must used together with useCallback?
Because the component wrap by React.memo always re-render with props is reference type.

Collapse
 
dinhhuyams profile image
TrinhDinhHuy

If you pass something with reference type such as function then YES we can use useCallback to prevent the re-render. Otherwise it's not necessary if you pass primitive values (boolean, string, ..)

Collapse
 
iarkovenko profile image
Iarkovenko

Why Counter doesn't update its own value after we update count1 ? increaseCounter2 remember count1 value equal 1 after first update using increaseCounter2

Collapse
 
machy44 profile image
machy44

I believe you figured out why in meantime but I will answer anyway.
const increaseCounter2 = React.useCallback(() => {
setCount2(count2 => count1 + 1)
}, [])
Because when state is set author uses count1 + 1. I believe he wanted to write count2 + 1 and that this is syntax error.

Collapse
 
thanhlongnguyen140499 profile image
Nguyễn Thanh Long

Good Article! Thank you, Huy!

Collapse
 
dinhhuyams profile image
TrinhDinhHuy

You are welcome