React State Overview

React is a widely used JavaScript library for creating user interfaces, with one of its key features being the use of "state". In this article, we'll briefly explore what state is, its purpose, how to update it, and whether it operates asynchronously.

For a more in-depth look into state and how to use it, refer to the React Docs here!

What is State?

In React, state is a JavaScript object that stores information about the current state of a component. This object can be updated and accessed as needed. Whenever the state of a component changes, React automatically updates the corresponding part of the user interface to show the new state. This update is called a re-render. The use of state helps create dynamic and interactive user interfaces that can respond to user actions or external data changes.

When do we use State?

We use state whenever we need to store and update data in a component over time. For example, if we're building a form component that allows a user to enter their name and email address, we might store those values in state so we can update them as the user types.

State is also important because it's what triggers React to re-render a component when the state changes. Whenever we call the setState method to update the state, React will automatically re-render the component to reflect the new state. This is what makes React so efficient and fast, because it only updates the parts of the UI that need to be changed.

Is State Asynchronous?

Yes, state in React is asynchronous. When you update the state of a component using setState() method, React schedules the update and may batch multiple updates together. This is done for better performance, as updating the DOM multiple times can be inefficient.

Because of this, you should not rely on the current state inside the setState() method, as it may not have been updated yet. Instead, you can use the previous state as a parameter to a function passed to setState() to ensure that you always have the most up-to-date state.

How do we Initialize and set State?

For example, let's say we're building a simple counter component that displays a number and has a button to increment that number. We could store the current value of the counter in state like this:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(prevCount => prevCount + 1);
  }

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default Counter;

In this example, we import the useState hook from React to define a state variable called count, which is initially set to 0.

When the button is clicked, the handleClick function updates the count state variable by calling the setCount function. This function receives the previous state value as an argument, increments this value by one, and returns the new state variable. By using the prevCount variable, we make sure that we are always using the most current and accurate state value when updating the state. This helps prevent errors due to state's asynchronous behavior.

When the new state value is passed to the setCount function, this updates the state and triggers a re-render of the component. This allows the user interface to display the new count value in real-time as it changes.

Conclusion

Overall, React's state is an efficient and powerful concept that gives it an advantage over Vanilla JavaScript for building complex and dynamic user interfaces.

When dealing with multiple components that share data, errors are much more likely to occur when updating the DOM directly in Vanilla JavaScript. React's state allows you to manage component data and control their behavior without directly manipulating the DOM. This makes it easier to create user interfaces that change and respond to things like user actions or changes in data. Plus, React's virtual DOM makes updating the user interface more efficient by only updating the necessary parts or components.