react js, how to sequentially / synchronously update states that depend on each other?

I have a state, lets call it B, that I always reset when I change state A.

But: now I want to reset it, and then set it again. how to do that with react js?

Example is here:
https://codepen.io/jossnaz/pen/bGVXxev

the goal is to have “B is 1” in the output

You cannot just remove setB(0) from the useEffect of A

why does this not work? how to make it work, the right way?

Javascript:

const { useState, useEffect } = React

const App = () => {
  const [A, setA] = useState(0);
  const [B, setB] = useState(0);
  const [msgB, setMsgB] = useState('');

  useEffect(()=>{
      setB(0);
  }, [A]);
  useEffect(()=>{
      setMsgB('B is: ' + B);
  }, [B]);
  const onClick = () =>{
    setA(A ? 0 : 1); //basically a toggle
    setB(1);
  };
  return(
    <div className="box">
      <button onClick={onClick}>click me to test </button>

      <div><strong>A:</strong> {A}</div>
      <div><strong>B:</strong> {B}</div>
      <div>debug:</div>
      <div>{msgB}</div>
    </div>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))

again, what do I want?

I want to call

    setA(A ? 0 : 1); //basically a toggle
    setB(1); // <--------- make this work!

and have B on value 1. now its always 0.

Source: ReactJs