CODEWITHSUNDEEP
reactjsstate
Alx_Wil95
Alx_Wil95

Reputation: 169

change state with prevState

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>
  )
}

Upvotes: 1

Views: 671

Answers (1)

Drew Reese
Drew Reese

Reputation: 202836

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
  };

Edit react - regular and functional state updates

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.

Upvotes: 2

Related Questions