What is SetState() in React JS?

In React.js, setState() is a fundamental method used for updating the state of a component. React is a popular JavaScript library for building user interfaces, and state management is a critical aspect of building dynamic and interactive web applications.

The setState() method is provided by the base class Component, which is extended when creating custom components in React. When you call setState(), you are essentially telling React that you want to update the internal state of a component. React then re-renders the component and its child components, reflecting the updated state in the user interface. Apart from it by obtaining a React JS Course, you can advance your career in React. With this course, you can demonstrate your expertise in applications using React concepts such as JSX, Redux, Asynchronous Programming using Redux-Saga middleware, Fetch data using GraphQL, many more fundamental concepts, and many more.

One important thing to note about setState() is that it is asynchronous. When you call setState(), React schedules an update to the component's state and efficiently re-renders the component, often batching multiple state updates together for performance reasons. This means that you can't immediately access the updated state value after callingsetState(). Instead, you can provide a callback function as the second argument to setState(), and that function will be called after the state has been updated and the component has been re-rendered.

Here's a simplified example of how setState() is used in a React component:

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleIncrement = () => {
    // Using setState to update the count state
    this.setState({ count: this.state.count + 1 }, () => {
      // Callback function to access the updated state
      console.log('Count after increment:', this.state.count);
    });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}

export default MyComponent;

In this example, when the "Increment" button is clicked, setState() is used to update the count state, and a callback function is provided to log the updated state value. This demonstrates the asynchronous nature of state updates in React and the use of setState() to manage component state, trigger re-renders, and maintain a responsive user interface.