React is a popular JavaScript library for building user interfaces. One of the core features of React is the ability to manage and update component state using the setState() method. However, there has been some confusion and debate regarding whether the setState() method is asynchronous or not. In this article, we’ll dive into this topic and shed light on how the setState() method behaves.
We will learn why setState is async and show you some issues related to it and how to fix this error and make your code work as you expect.
Creating React App:
Step 1: Create a React application using the following command.
npx create-react-app gfg
Step 2: After creating your project folder(i.e. gfg), move to it by using the following command.
cd gfg
Project Structure: It will look like this.
Why setState() is async?
ReactJs sets its state asynchronously because it can result in an expensive operation. Making it synchronous might leave the browser unresponsive. Asynchronous setState calls are batched to provide a better user experience and performance.
setState() async Issue: If you’re using ReactJs, then you’re likely familiar with the setState method. This function is used to update the state of a component, but it’s important to remember that setState is asynchronous. This can lead to tricky debugging issues in your code.
Example 1: Let’s create an Input field inside our App.js file.
Javascript
import React from 'react';class App extends React.Component { constructor() { super(); this.state = { value: '', }; } render() { return ( <div> <h2>neveropen</h2> <form> <label> Input Field:- <input value={this.state.value} onChange={(e) => { console.log('Initial value:- ', this.state.value); this.setState({ value: e.target.value }); console.log('Final value:- ', this.state.value); }} /> </label> </form> </div> ); }}export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output: Here you can see the initial value and the final value are the same.
Example 2: The good news is that there are ways to work around this. One option is to use async/await or a similar construct. However, this won’t work with setState. Another option is to add a callback function in the setState. Below is the implementation.
Javascript
import React from 'react';class App extends React.Component { constructor() { super(); this.state = { value: '', }; } render() { return ( <div> <h2>neveropen</h2> <form> <label> Input Field:- <input value={this.state.value} onChange={(e) => { console.log('Initial value:- ', this.state.value); this.setState({ value: e.target.value }, () => { console.log('Final value:- ', this.state.value); }); }} /> </label> </form> </div> ); }}export default App; |
Run the application: Use the below code to run the application
npm start
Output:
