setState is an Asynchronous Function

Evan Hicks

—July 12, 2022

The Problem

To update the state of a component, you use the setState method. However it is easy to forget that the setState method is asynchronous, causing tricky to debug issues in your code. The setState function also does not return a Promise. Using async/await or anything similar will not work.

Click to Copy

handleButtonClicked = evt => {
    this.setState({name: evt.currentTarget.value})
    this.props.callback(this.state.name) // Will send the old value for name
}

The Solution

When the state is actually set can vary. Usually it happens on the next render, but it can sometimes be batched for performance. The setState function takes an optional callback parameter that can be used to make updates after the state is changed.

Click to Copy

handleButtonClicked = evt => {
    this.setState({name: evt.currentTarget.value}, () => {
        this.props.callback(this.state.name)
    })
}

This function will get called once the state has been updated, and the callback will receive the updated value of the state.

Platform

Languages & Frameworks

Why Sentry?

Features

setState is an Asynchronous Function

The Problem

The Solution

Further Reading

setState is an Asynchronous Function

The Solution

Further Reading

A peek at your privacy

Who we collect PII from

PII we may collect about you

How we use your PII

Third parties who receive your PII

We use cookies (but not for advertising)

Know your rights