[2.1장 컨택스트] 2.1.4 공급자와 소비자 / 에서 질문이 있습니다.

안녕하세요 선생님 react context를 이해하려고 시도하는 중입니다.

const countContext = MyReact.createContext({
  count: 0,
  setCount: () => {},
});

class CountProvider extends React.Component {
  constructor(props) {
    console.log("CountProvider construtor");
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    const value = {
      count: this.state.count,
      setCount: (nextValue) => this.setState({ count: nextValue }),
    };
    return (
      <countContext.Provider value={value}>
        {this.props.children}
      </countContext.Provider>
    );
  }
}

const Count = () => {
  return (
    <countContext.Consumer>
      {(value) => {
        console.log("CountComponent", value);
        return <div>{value.count}</div>;
      }}
    </countContext.Consumer>
  );
};

const PlusButton = () => {
  return (
    <countContext.Consumer>
      {(value) => {
        console.log("PlustButtonComponent", value);
        return (
          <button onClick={() => value.setCount(value.count + 1)}>
            + 카운트 올리기
          </button>
        );
      }}
    </countContext.Consumer>
  );
};

export default () => (
  <CountProvider>
    <Count />
    <PlusButton />
  </CountProvider>
);

Count , Plus Button component return 문에 각각

console.log("CountComponent", value);
console.log("PlustButtonComponent", value);

로그를 남겨봤습니다.

사진에 표시 된 것 처럼 로그가 각 Component마다 2번씩 찍히는데 그 이유를 알 수 있을까요...?

로그의 value 값이 다른게 힌트 같은데 해석을 하지 못하겠습니다.