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