reactjs - UseContext がすべてのコンポーネントを更新しない

Question

TestContext.js

 import { createContext } from 'react';

const CheckoutDrawerContext = createContext({
  showDrawer: false,
  toggleCheckoutDrawer: () => {},
});

export default CheckoutDrawerContext;

TestComponent.jsx

export default function TestComponent() {

  const checkoutDrawer = useContext(CheckoutDrawerContext);

  function placeOrder() {
    console.log(checkoutDrawer.showDrawer)
      checkoutDrawer.toggleCheckoutDrawer()
    };

  return (
    <div className="cart-drawer__summary">
     <div></div>
      <button type="button" className="order-button" onClick={placeOrder}>
      submit
      </button>
    </div>
  );
};

TestComponent1.jsx

export default function TestComponent1() {

  const checkoutDrawer = useContext(CheckoutDrawerContext);

  function placeOrder() {
    console.log(checkoutDrawer.showDrawer)
      checkoutDrawer.toggleCheckoutDrawer()
    };

  return (
    <div className="cart-drawer__summary">
     <div></div>
      <button type="button" className="order-button" onClick={placeOrder}>
      submit
      </button>
    </div>
  );
};

App.js

export default function App() {
  const [showDrawer, setShowDrawer] = useState(false);

  const toggleCheckoutDrawer = () => {
    setShowDrawer(!showDrawer);
  };
    return(
      <Router>
    
    <CheckoutDrawerContext.Provider value={{ showDrawer, toggleCheckoutDrawer }}>
        <Route path="/test" exact component={TestComponent}/>
        <Route path="/test1" exact component={TestComponent1}/>
    </CheckoutDrawerContext.Provider>
        
    </Router>
    );
  }

手順: http://localhost:3000/ testを開き、submit ボタンをクリックし、console.log が false を出力し、別のタブでhttp://localhost:3000/ test1を開き、submit ボタンをクリックし、 console.logが false を出力します (はまだ偽です。TestComponent の値を変更しましたか? )

次に、以下のように「checkoutDrawer.toggleCheckoutDrawer()」を呼び出した後に console.log を追加しました。

 function placeOrder() {
    console.log(checkoutDrawer.showDrawer)
      checkoutDrawer.toggleCheckoutDrawer()
    console.log(checkoutDrawer.showDrawer)
    };

これで、console.log に false false が出力されます。( checkoutDrawer.toggleCheckoutDrawer() の後に console.log も false を出力するのはなぜですか? )