React Tutorial - 29.useMemo-and-useCallback
1.when will react re-render
a.either state or props change will cause the entire component re-rendered
b.children's state change will not cause the parent component re-render
c.optimizing performance of react application is mainly about preventing non-related component re-rendered
2.how purecompnent works
a.prevent child component re-rendered when state of parent component changed
b.prevent child componet re-rendered when props of child component has not changed and other state have change in the parent component
aa.pass a number or string as prop
bb.pass a class instance property as props
cc.pass a different value from state
3.how memo works
a.prevent child component re-rendered when state of parent component changed
b.prevent child componet re-rendered when props of child component has not changed and other state have change in the parent component
a.pass string or number as prop
b.pass obj as prop -- child component re-rendered as well
aa.because if the component should re-rendered is controlled by shouldComponentUpdate hook fucntion. there is a API in the shouldComponentUpdate name shallowEqual which will return true(update) or false(not update)
bb.shallowEqual compare new state to old state, at the same time compare new props to old props, it will only compare if their values are eqaul when you pass a primitive data type as prop.
cc.shallowEqual compare if objects are equal , then compare how many keys in either old prop or new props are eqaul. At last,will compare if all keys match each other
c.useMemo -- will return a cached(memoized) value if you have not change the dependency
d.useMemo's first argument is a callback function which will return a function as props, and second argument is an array to store the dependencies.
e.useCallback -- is pretty much a shorthand of useMemo when it returns a function
4.useMemo avoid heavy re-calculation
On this page of the site you can watch the video online React Tutorial - 29.useMemo-and-useCallback with a duration of hours minute second in good quality, which was uploaded by the user feeco 16 October 2021, share the link with friends and acquaintances, this video has already been watched 33 times on youtube and it was liked by 1 viewers. Enjoy your viewing!
