Understanding React SetState: Why And How To Use It?

August 02, 2023

Developers worldwide use React to build dynamic user interfaces, as it is one of the best JavaScript libraries available. And a key factor behind its wide-scale popularity is its ability to manage or update component states on the fly.

Table of Contents

As we know, states enable us to create interactive and dynamic components in React. So, understanding how to update these states in React is pivotal for every developer. In this article, we will explore the most common and irrefutably the best way to update component states in React: via React setState method.

Why Use React setState?

At its core, React works per our command as it is a declarative library. We define the looks, appearance, and functionality of the UI in one state, and React updates the UI with every state change to ensure optimum performance.

However, React is a declarative library and doesn’t perform the above until you command or call it. The React setState method facilitates the above by enabling us to modify the component state and re-render the UI. Still not convinced? Let’s review some reasons why React setState method is the best.

Three Reasons to Use setState Method

1) UI Updates

Calling setState in React is like requesting the component to intelligently update and re-render the UI to reflect the new state. The critical term is ‘intelligently’ as React setState doesn’t render the entire UI needlessly but only the necessary parts. This minor tweak works wonders in improving the overall performance of React applications.

2) State Encapsulation

React setState ensures the updates or changes are encapsulated internally within the component. State encapsulation may seem pointless initially, yet its magic unfolds when you revisit the code. The encapsulation makes the code organized, clean, and easy to maintain.

3) Component Reusability

One of the most prominent features of React setState is that it lets you create dynamic and reusable components, which implies you can readily change the components’ behavior or looks by updating the state without the need to modify its implementation.

How to Use React setState?

In any React component, you can call ‘setState’ to update its state and pass the revised state as an object. Doing so forces React to merge the existing and the new state and re-render the component. Let’s see this process at work with a code example that increments a value on a button click.

import React, { Component } from 'react';

class Counter extends Component {

  constructor(props) {

    super(props);

    this.state = {

      count: 0,

    };

  }

  incrementCount() {

    this.setState({ count: this.state.count + 1 });

  }

  render() {

    return (

      <div>

        <p>Count: {this.state.count}</p>

        <button onClick={() => this.incrementCount()}>Increment</button>

      </div>

    );

  }

}

In the above example, the ‘Counter’ component is initially defined with the ‘count’ value set to ‘0’. Next, the ‘incrementCount’ method is set for every button click, which updates the component state by incrementing the ‘count’ using React setState.

More importantly, it is vital to remember setState in React is an asynchronous function. So, you cannot just access the updated component state immediately after the call-up. For that, it is a must to use an optional callback function. Here’s how:

this.setState({ count: this.state.count + 1 }, () => {

  console.log('Updated count:', this.state.count);

});

Besides this, you can also reliably update the state by passing the function as an argument to React setState. This way the function receives and reads the previous state as an argument and returns the new one. This approach works wonders when you have to update a state using the previous one or update multiple concurrently.

this.setState((prevState) => {

  return { count: prevState.count + 1 };

});

Final Thoughts

React setState method is the most reliable way to update component states in React or manage multiple states. They help us create interactive and dynamic UI components that are highly responsive to user actions and perform the required functions effectively. In short, using React setState helps encapsulate state updates for better maintenance, boosts UI consistency, and improves reusability.

The sooner you learn React setState method, the better it is, as you cannot simply create robust React applications seamlessly without it. Yes, you can use other ways or alternative techniques to manage or update states, yet not many works like React setState or are as hassle-free as React setState.

Also Read: React Props Explained With Example