setState is an Asynchronous Function
Evan Hicks
—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.
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.
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.
Further Reading
If you’re looking to get a deeper understanding of how JavaScript error reporting works, take a look at the following articles:
- Sentry BlogGuide to Error & Exception Handling in React
- Sentry BlogHow to identify fetch waterfalls in React
- Syntax.fmReact Server Components
- Sentry BlogSentry can’t fix React hydration errors, but it can really help you debug them
- Syntax.fmWhy the jQuery Creator Uses React and Typescript
- Syntax.fmListen to the Syntax Podcast
- Sentry BlogReact Native Debugging and Error Tracking During App Development
- Syntax.fmDiscussion on building native iOS and Android apps with React Native
- SentryReact Error & Performance Monitoring
- Sentry BlogFixing memoization-breaking re-renders in React
- SentryReact Debug Hub
- Listen to the Syntax Podcast
![Syntax.fm logo]()
Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.
SEE EPISODES
Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.