So I have been doing React-Native for a couple months now and I stumbled upon a situation where a huge chunk had to be updated in setState function. I had to call a function afterward that was dependent on that state. Of course the state didn't mutate right away since I learned that setState is Asynchronous.
This is my structure
Parent
stateSetter = (data) => {
this.setState({
...data
})
}
dateFilter = () => {
let startDate = this.state.startDate
let endDate = this.state.endDate
if (startDate !== "" && endDate == "") {
this.setState({
DataFiltered: this.state.Data.filter(elem => Helper.convertDateToISO(elem.date)>= Helper.convertDateToISO(startDate))
})
}else if(startDate == "" && endDate !== ""){
this.setState({
DataFiltered: this.state.Data.filter(elem => Helper.convertDateToISO(elem.date)<= Helper.convertDateToISO(endDate))
})
}else if(startDate !== "" && endDate !== ""){
this.setState({
DataFiltered: this.state.Data.filter(elem => Helper.convertDateToISO(elem.date)>= Helper.convertDateToISO(startDate) && Helper.convertDateToISO(elem.date)<= Helper.convertDateToISO(endDate))
})
}else if(startDate === "" && endDate === ""){
this.setState({
DataFiltered: this.state.Data
})
}
}
Child
<TouchableWithoutFeedback onPress={async () => {
await stateSetter({
["startDate"]: "",
["endDate"]: "",
["startDateText"]: "From...",
["endDateText"]: "To..."
})
dateFilter()
}} >
Now I was under the belief that Async Await works only when await is waiting for a promise.....right? So by that logic, in the aforementioned code, await and async should have no effect on the program.
au contraire
When I don't use async await, it doesn't work. It only works when I use async await.
When I was just learning about async, I tried a couple things and none of them worked.
this.setState({ ...data }, () => {
this.dateFilter()
})
//Had no effect
Also: Promise had no effect.
TlDr: Why is my Async Await working?
tl;dr: Because you are using await, the rest of the function is scheduled to be executed in the future and at that point in time the state will have been updated. Whether or not you are actually awaiting a promise is irrelevant.
I don't know the internals of React, but I assume the queue a micro task to update the state. Promise callbacks are also processed as a micro task (and async/await is just a nice way to work with promises).
So first React adds a micro task to update the state, and then await adds a micro task for resuming the function.
We can actually do a simple experiment to verify what the order of events is by passing a callback to setState (no JSX because somehow I couldn't make it a working snippet):
class Component extends React.Component {
async doStuff() {
await this.setState({newState: true}, () => console.log('inside setState callback', JSON.stringify(this.state)));
console.log('after await this.setState', JSON.stringify(this.state));
}
render() {
return React.createElement('button', {onClick: () => this.doStuff()}, 'Click me');
}
}
ReactDOM.render(
React.createElement(Component),
document.body
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>If you run this you will see that the callback gets called first. We know that the state has been updated at this point because that's the whole purpose of the callback: It is executed when the state has been updated.
Then the remainder of the function is executed, and since the state has already been updated, it will be accessing the new state.
However, since you are were wondering yourself why this works, I would recommend against this practice and just use the setState callback.
To make await applicable for stateSetter it must return an Promise
stateSetter = (data) => {
return new Promise(resolve => setTimeout(resolve, 3000));
}