CODEWITHSUNDEEP
javascriptreactjs
Brad
Brad

Reputation: 133

I want to Understand SetState and Prevstate in ReactJS

I am new to ReactJS, I am using wizard form in my project which enable user to next and prev step. I copied some code for next button but honestly did't understand what it mean.

Can you please help me understand the following code:

next() {
    this.setState(prevState => ({ current: prevState.current + 1 }));
}

Upvotes: 3

Views: 5733

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

As I mentioned in my comment, you'll need to look into the docs itself to know more about how setState works.

Further here, I want to specify why shall we need it?

In react states are not mutable ie. to say you cannot change the state directly like:

state = { current: 1 }
// ...and somewhere in your code
this.state.current = 2 // won't work
this.state.current = this.state.current + 1 // also, no luck
console.log(this.state.current) // 1
// the reason is immutable

So, you'll need to update the state without mutating it. And thus, react provides us publicly to use setState.

setState has two arguments: updater and callback.

The updater can accept state and props. So that you update the state checking its condition based on state and props or somehow else you'll want.

The callback is provided here in the setState so you may know its effect like what the current is now. See an example below:

this.setState((state, props) => { // previous state, previous props
  // you may additionally check some condition
  // or combine state and props
  // like, state.current + props.value
  return { current: state.current + 1 }
}, () => {
// ^^- callback
  console.log(this.state.current)
})

BTW, there are some different options to use the setState:

a) without updater and callback
eg. setState({current: 2})
b) with updater param only
eg. setState(()=>({current: 2}))
c) with updater and callback
eg. see preceding example of code
d) without updater but with callback
eg.  setState({current: 2},()=>console.log(this.state.current))

Upvotes: 1

thejohnbackes
thejohnbackes

Reputation: 1255

Thanks for contributing.

As has been suggested in the comments, you probably should take a look at the documentation, but since you are a new contributor, I thought I'd try to answer your question.

How State and setState Work

Every component react class has a "state." When "state" is updated, the component will re-render. setState is the method used to update the state of the component. this refers to the component itself.

Your component state object might look like this initially: { current: 0, something: 'foo' }.

What next() is doing

When you call next(), then setState will also be called. setState is called with a callback. The callback provides an argument, here named prevState - prevState is the current state on the component, so { current: 0, something: 'foo' }.

The return value of setState will set any fields on the state object that are provided. After calling this.setState, the new value of component.state will be { current: 1, something: 'foo' }.

re-render

A re-render of the component will be triggered because a shallow comparison of the new state and previous state objects will return false.

Hope this helps!

Upvotes: 7

Related Questions