如何防止功能组件的上下文提供程序中的子渲染？

Question

有一个<Counter />和一个孩子<Display />以显示计数。

我在Provider中使用<Counter />，以便孩子可以使用useContext获取当前计数，并且我希望在useMemo中使用<Display />以防止未使用渲染。

flag仅在<Counter />中使用。那么，为什么flag更改时备忘录子项重新呈现？

代码如下：

const Counter1: React.FC<Props> = (props) => {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  console.log('counter wrapper render');

  return (
    <CounterContext.Provider value={{ count, setCount }}>
      <div>
        flag: {`${flag}`}
        <button onClick={() => setFlag(!flag)}>set flag</button>
      </div>

      <div>
        counter1: <Display />
      </div>
      <div>
        <button onClick={() => setCount(count + 1)}>add counter1</button>
      </div>
    </CounterContext.Provider>
  );
};

const Display: React.FC = React.memo(() => {
  const counter = useContext(CounterContext);

  console.log('counter1 display render');

  return <div>{counter.count}</div>;
});

export default Display;