Updating the State and Re-Rendering Elements

In React, the state is a source of data that drives the UI of a component. The state is managed by the component itself, and it is used to store and update the data that is displayed in the component’s UI.

Updating the state and re-rendering the UI is an important part of building applications with React, and it is done using the setState() method. The setState() method is a built-in method of a component that allows you to update the state and re-render the component’s UI.

In this article, we will explore the setState() method in more detail and see how it is used to update the state and re-render elements in React.

Updating the State

To update the state of a component, you need to use the setState() method. The setState() method takes an object as an argument and merges it with the current state of the component.

For example, consider the following component that has a state with a count property:

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

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

In this example, the Counter component has a state with a count property that is initialized to 0. The component also has a button element with an onClick prop that calls the setState() method when it is clicked.

When the setState() method is called, it updates the count property of the state and re-renders the component’s UI. In this case, the component’s UI is the h1 element that displays the count value, and it will be updated every time the button is clicked.

Re-Rendering Elements

When the state of a component is updated, the component’s UI is re-rendered to reflect the changes in the state. The component’s render() method is called again, and it returns a new tree of elements based on the updated state.

For example, consider the following component that has a state with a text property:

class TextBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ''
    };
  }

  render() {
    return (
      <div>
        <input value={this.state.text} onChange={(e) => this.setState({ text: e.target.value })} />
        <p>{this.state.text}</p>
      </div>
    );
  }
}

In this example, the TextBox component has a state with a text property that is initialized to an empty string. The component also has an input element with a `value prop and an onChange prop, and a p element that displays the text value.

When the user types in the input element, the onChange prop is called and the setState() method is called with the updated text value. This updates the text property of the state and re-renders the component’s UI.

In this case, the component’s UI is the input element and the p element, and they will be updated every time the user types in the input element.

Asynchronous Updating

The setState() method is asynchronous, which means that it may not immediately update the state of the component. This is because the setState() method is designed to be efficient and avoid unnecessary re-renders.

To update the state in a synchronous and predictable way, you can use the setState() method with a callback function or with the prevState parameter.

For example, consider the following code that updates the count property of the state in a synchronous and predictable way:

this.setState((prevState) => ({ count: 
prevState.count + 1 }));

In this example, the setState() method is called with a callback function that takes the prevState as an argument and returns the updated state object. The callback function is called after the state has been updated, and it ensures that the count property is updated in a synchronous and predictable way.

Conclusion

By understanding the asynchronous nature of the setState() method and using it with a callback function or the prevState parameter, you can update the state and re-render the UI in a reliable and efficient way.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.