change state with prevState

Question

I need help understanding prevstate. I've read what is prevstate, reac-prevstate, and state and lifecycle. But I still don't get it.

export default function SignInUp(props) {
  const [toggleClass, setToggleClass] = useState(false)
  const { handleLogin, handleRegister } = props

  const toggleState = () => {
    setToggleClass(!prevState)
  }

  return (
    <div className='UserContainer' style={{display: "grid", justifyContent: "center ", height: "100vh", width: "100vw"}}>
      <div className='btncontainer' style={{gridRow: "2 / 3"}}>
        <button onClick={toggleState} className='togglebtn' style={{background: "none", border: "none"}}>Signin</button>
        <button onClick={toggleState} className='togglebtn' style={{background: "none", border: "none"}}>Signup</button>
      </div>
      <SignIn handleLogin={handleLogin} className={toggleClass ? 'Disabled' : null} style={{gridRow: "2 / 3" }}/>
      <SignUp handleRegister={handleRegister} className={toggleClass ? 'Disabled' : null}/>
    </div>
  )
}

score 2 · Accepted Answer · answered Nov 08 '21 at 06:47

When enqueueing state updates it is common to access the previous state's value in order to compute the next state. Take the counter example.

/**
   * count +3 click handler using naive state updates.
   */
  const clickHandler1 = () => {
    // assume count equals some number n
    setCount(count + 1); // update queued, count === n, count = n + 1
    setCount(count + 1); // update queued, count === n, count = n + 1
    setCount(count + 1); // update queued, count === n, count = n + 1
    // when processed the count will be n + 1
  };

  /**
   * count +3 click handler using functional state updates.
   */
  const clickHandler2 = () => {
    // assume count equals some number n
    setCount((count) => count + 1); // update queued, count === n + 0, count = prevCount + 1
    setCount((count) => count + 1); // update queued, count === n + 1, count = prevCount + 1
    setCount((count) => count + 1); // update queued, count === n + 2, count = prevCount + 1
    // now when processed each call uses the result of the previous update
    // count will be n + 1 + 1 + 1, or n + 3
  };

If you were to simply enqueue several "standard" state updates, then each update overwrites the previous update. But if you were to use "functional" state updates, these access the previous state and return a new state value.

The difference is updating from the previous state's value versus updating from the previous render cycle's state value.

For toggling values, each next state necessarily depends on the previous state, in order to be toggled correctly.

const toggleState = () => {
  setToggleClass(toggleValue => !toggleValue);
}

This takes the previous state, assigns it to a variable named toggleValue and returns the negation of this value as the next state value.

Exactly, the reason is that setState is asynchronous, and you cannot guarantee the moment this is executed. For that you need to pass a callback in order to get the previous state at the actual moment the setState is being executed. — Sonia Aguilar, Nov 08 '21 at 07:13
@SoniaAguilar It's technically more accurate to say `setState` is synchronous and it's React batching and processing the state updates asynchronously. Think of `setState` as a request to React to update state at the next earliest convenience. — Drew Reese, Nov 08 '21 at 07:19

change state with prevState

1 Answers1