I have been reading docs for almost a week now and searching to find an exact answer !
When I use inline setState() for a onClick event, It works perfectly fine but when I move the setState() to a function named updateCount() in my class, It does not work for the first time and I get the reason.
The problem is I added async/await to the function, strangely it works. ( I am aware of other methods )
The question is why it works with async/await?
(By the way when I use VS Code, I get this massage : 'await' has no effect on the type of this expression. but it actually has an effect so maybe that is a bug in react JS ?! )
Original code that works fine :
class LastTest extends Component {
state = { count: 0 }
componentDidMount() {
document.title = `You clicked ${this.state.count} times`;
}
componentDidUpdate() {
document.title = `You clicked ${this.state.count} times`;
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
Bad code that does not update count for first click:
class LastTest extends Component {
state = { count: 0 }
componentDidMount() {
document.title = `You clicked ${this.state.count} times`;
}
updateCount(){
this.setState({ count: this.state.count + 1 });
document.title = `You clicked ${this.state.count} times`;
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.updateCount()}>
Click me
</button>
</div>
);
}
}
Updated code and added async/await to the function updateCount() :
class LastTest extends Component {
state = { count: 0 }
componentDidMount() {
document.title = `You clicked ${this.state.count} times`;
}
async updateCount(){
await this.setState({ count: this.state.count + 1 });
document.title = `You clicked ${this.state.count} times`;
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.updateCount()}>
Click me
</button>
</div>
);
}
}
