React Handbook

​x
​
function ChildComponent1 () {
  console.log('I re-render even though I receive no props')
  
  return (
    <div>
      Re-rendering child component
    </div>
  )
}
​
function ChildComponent2 () {
  console.log('I will not re-render because I am wrapped in memo()')
  
  return (
    <div>
      Static child component
    </div>
  )
}
​
const MemoizedComponent = React.memo(ChildComponent2)
​
function App () {
  const [count1, setCount1] = React.useState(1) 
  
  const handleIncrement = () => {
    setCount1(count1 + 1)
  }
  
  return (
    <div>
      Reactive count: {count1}
      <br />
      <button onClick={handleIncrement}>
        Handle increment reactive count
      </button>
      <ChildComponent1 />
      <MemoizedComponent />
    </div>

React.memo() is a higher component that serves a similar purpose as PureComponent - to prevent the wrapped component from re-rendering unless its props change. If your component re-renders, its children will re-render, too. That's why it's important to consider where using memo() makes sense.

Reactive count: 1

Re-rendering child component

Static child component