我如何使用 React.memo 来防止重新渲染？

Question

I have two functional components. One keeps an incrementing number as state and displays it. Its child is a button which receives the increment function as a prop and calls it when clicked.

const IncrementButton = props => {
  return <button onClick={props.increment}>Increment</button>;
};

const App = () => {
  const [count, setCount] = React.useState(0);
  const increment = () => setCount(count + 1);

  return (
    <div className="App">
      <h1>{count}</h1>
      <IncrementButton increment={increment} />
    </div>
  );
};

When App re-renders, I want to avoid re-rendering IncrementButton .

The docs suggest using React.memo to do this, but when I tried the below example, it didn't help.

const IncrementButton = React.memo(props => {
  return <button onClick={props.increment}>Increment</button>;
});

Am I missing something? What is the correct way to memoize a component so it doesn't re-render?

Answer 1

The issue you have is that every time App rerenders, it creates a brand new increment function. So every time Incrementbutton renders, it has a brand new props.increment. As a result, React.memo doesn't really do anything, because the props keep changing, and so no renders can be skipped.

The fix for this is to make it so the increment function is not recreated every time. You can do this using useCallback, so a first pass might look like this:

const increment = useCallback(
  () => setCount(count + 1), 
  [count]
)

This will create the increment function just once, and then memoize the result, until count change. Unfortunately, count is the only thing that could really change anyway, so we end up having to recreate this function most of the time. So we need to make another modification: instead of passing count +1 into setCount, setCount allows you to pass a function into it. This function will get called with the previous value, so that you can base the new value on it:

const increment = useCallback(
  () => setCount(oldCount => oldCount + 1),
  []
);

And now you have a increment function that's created only once ever, which in turn lets IncrementButton have no changes to its props, and thus React.memo can do its job and skip rerendering.