Reactjs, I need some understanding of this.setState and prevState

Question

componentWillReceiveProps(nextProps) {
    // Check to see if the requestRefresh prop has changed
    if (nextProps.requestRefresh !== this.props.requestRefresh) {
        this.setState({loading: true}, this.updateData);
    }
}

As far as my understanding goes, this lifecycle hook is called when a Component's properties are updated by the parent.

This piece of code checks if the requestRefresh property is different (one to update and one that it currently has)

Now what i dont understand is this , this.updateData);

why is this with the setState method. Please help me understand

Secondly where does prevState come from and which lifecycle hook can update it

Have you read [the section of the documentation on `setState`](https://reactjs.org/docs/react-component.html#setstate)? It explains what the second parameter does (namely, calls a function after the state has been updated). — Joe Clay, Apr 30 '18 at 09:40
Also, it's generally frowned upon to ask multiple questions in a single post, as it makes it less clear what you're asking/how to answer. I'd recommend narrowing your post down to just one question/problem :) — Joe Clay, Apr 30 '18 at 09:42
I see this reactjs sheet [here](https://reactcheatsheet.com/) It has the components that use prevState. — Eshan I., Apr 30 '18 at 09:44
this.updateData is the callback function of setState, check this https://stackoverflow.com/questions/42038590/when-to-use-react-setstate-callback/42038724#42038724, secondly, componentDidUpdate lifecycle function exposes prevState, along with getDerivedStateFromProps. Also setState has an updater function syntax, https://stackoverflow.com/questions/48209452/when-to-use-functional-setstate/48209870#48209870 . Please refer to the documentation for such questions — Shubham Khatri, Apr 30 '18 at 09:50

score 4 · Accepted Answer · answered Apr 30 '18 at 09:45

4

the setState method can be called with a callback as its second parameter, mainly to handle operations which need to be done when the state is fully updated.

In your example this.updateData is the callback.

setState's first argument is also a function, with the signature (prevState, props) => stateChange, this is allowing you to get access to the previous state when performing updates.

You may want to check the official doc for further details : https://reactjs.org/docs/react-component.html#setstate

answered Apr 30 '18 at 09:45

Eddo

177
2
7

can we change state of a parents component in a child component – Eshan I. Apr 30 '18 at 10:05
1

Not directly, but you could fire an event from the child component which would execute one of the parent's function, and update the state inside this function. You can look at the example given in this question: https://stackoverflow.com/questions/26176519/reactjs-call-parent-method – Eddo Apr 30 '18 at 10:14

Martin Reiche · Answer 2 · 2018-04-30T09:45:49.953

The React maintainers discourage the use of componenetWillReceiveProps.

From the React docs:

It is recommended that you use the static getDerivedStateFromProps lifecycle instead of UNSAFE_componentWillReceiveProps. Learn more about this recommendation here.

To answer your question: prevstate is the previous state, so it is the state of your component before new props are received which in turn might chnage the new state. You can also hanlde prevstate in the static getDerivedStateFromProps method:

static getDerivedStateFromProps(nextProps, prevState)

getDerivedStateFromProps is invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates.

Reactjs, I need some understanding of this.setState and prevState

2 Answers2