Some misunderstandings with React.memo, useMemo, and useCallback

1. If parent component rerender, will all the child components rerender, even if the props for the child component remain the same ?

2. Do we must implement shouldComponentUpdate for React.PureComponent ?

3. What’s the relationship between React.memo and React.useMemo ?

const ChildMemoized = React.useMemo(
() => <ChildByUseMemo prop={useMemoDependency} />,
[useMemoDependency]
)
<div>
{ChildMemoized}
{// <ChildMemoized/>} <!--not working-->
</div>

4. What is the official recommended usage for React.useMemo?

const Component = ({ useMemoDependency }) => {
const calculate = useMemoDependency => {
console.log("calculate")
// imagine there are expensive calculations here :)
return useMemoDependency.slice(0)
}
const memoizedValue = React.useMemo(
() => calculate(useMemoDependency), // calculate memoized value from dependency
[useMemoDependency]
)
return <div>...</div>
}

5. Can we replace useMemo by useCallback in the last example ?

const memoizedValue = React.useMemo(
() => calculate(useMemoDependency), // calculate memoized value from dependency
[useMemoDependency]
)
const memoizedValue = React.useCallback(
calculate(useMemoDependency), // calculate memoized value from dependency
[useMemoDependency]
)

6. How to use useCallback to “prevent unnecessary renders” ?

const ChildWithMemoizedProp = props => {
console.log("render")
return <div></div>
}
...<ChildWithMemoizedProp
memoizedValue={memoizedValue}
setCount={setCount}
memoizedOnClick={memoizedOnClick}
/>
...

7. If ChildWithMemoizedProp is a PureComponent, we don’t need to pass the memoized value to keep the equality of props, so why should we use useCallback ?

const Component = () => {
const onClick = () => {}
return <Child onClick={onClick}>
}
const Component = () => {
const onClick = useCallback(
() => {...}), [], // dependency is empty to make sure it won't change
);
return <Child onClick={onClick}>
}

8. What is memoization ?

--

--

--

Fun of ReactJS, Javascript, Data visualization www.yuebaixu.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Getting started with React Native Navigation V5

Javascript Map

Essential Considerations to Hire ReactJS Development Company

How to use inline images in rich-text with sanity.io

Page Lifecycle API: A Browser API Every Frontend Developer Should Know

Why you should Hire Reactjs Developer 2021–22

Spend A Quality Afternoon with React!

Implementation of websocket connection in React-Native

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Albert Yuebai XU

Albert Yuebai XU

Fun of ReactJS, Javascript, Data visualization www.yuebaixu.com

More from Medium

How To Create A Tooltip Component With React

Re-assigning a value to UseParams hook using useState hook.

Hide and replace sticky element on scrolling in a React way

Adding the Material UI CSS framework to an React application