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:

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?


const { useState, useEffect } = React

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

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

      <div><strong>A:</strong> {A}</div>
      <div><strong>B:</strong> {B}</div>

ReactDOM.render(<App />,

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