How to use React.memo and useCallback

In this article, I’ll talk about when and how to use React.memo and the useCallback hook. After this article, you will understand when to use useCallback. Learn how React.Memo and useCallback work together.

Briefly about React.memo and useCallback

React.Memo is a higher-order component. Similar to React.PureComponent, but intended for functional components.

The second argument of React.Memo is the ability to pass a function that will decide to re-render the component based on previous and current props

Higher-order component — the function takes a child component and parameters, and then creates a container on top of the child component.

React.PureComponent — similar to React.Component, but the only difference in the shouldComponentUpdate method.

The PureComponent compares new values ​​with previous ones and returns the result of the comparison. React.Component — returns true

useCallback — the hook will return a memoized callback function, which changes only if the values ​​from the dependencies change.

Examples

Base — Doesn’t use React.Memo. The component will be rendered every time.

let count = 0
export default function Base({ action }) {
  console.log(`${++count} Base component`)
  return <h3 onClick={action}>Base</h3>
}

Memo — uses React.Memo. The component will be rendered every time the properties change.

let count = 0
export default React.memo(function Memo({ action }) {
  console.log(`${++count} Memo component`)
  return <h3 onClick={action}>Memo</h3>
})

NoUseCallback — do not use useCallback. Base and Memo components are rendered every time

export default function NoUseCallback() {
  const [a, setA] = useState('')
  const [b, setB] = useState('')

  useEffect(() => {
    setTimeout(() => {
      console.log('change value not related to action')
      setA('a')
    }, 1000)

    setTimeout(() => {
      console.log('change value related to action')
      setB('b')
    }, 3000)
  }, [])

  const action = () => console.log(b)
  return (
      <>
        <Base action={action} />
        <Memo action={action} />
      </>
  );
}

Console:

1 Base component
1 Memo component
change value not related to action
2 Base component
2 Memo component
change value related to action
3 Base component
3 Memo component

UseCallback — use the useCallback method. Rendered Base 3 and Memo 2 times

export default function UseCallback() {
  const [a, setA] = useState('')
  const [b, setB] = useState('')

  useEffect(() => {
    setTimeout(() => {
      console.log('change value not related to action')
      setA('a')
    }, 1000)

    setTimeout(() => {
      console.log('change value related to action')
      setB('b')
    }, 3000)
  }, [])

  const action = useCallback(() => {
    console.log(b)
  }, [b]);

  return (
      <>
        <Memo action={action} />
        <Base action={action} />
      </>
  );
}

Console:

1 Memo component
1 Base component
change value not related to action
2 Base component
change value related to action
2 Memo component
3 Base component

Conclusion

We use React.Memo when we want the component to be re-rendered when props or specific props change.
We wrap the function in useCallback when we pass it to other components or when external variables are used