Updating state based on previous state value - anastasiamexa/react-complete-guide-course-resources GitHub Wiki

In React, setState is a method used to update the state of a component. It is a fundamental concept for managing and handling changes to a component's internal data. Here's an explanation of the setState concept:

1. State in React:
State represents the internal data or variables that a React component can maintain. It's used to store and manage information that can change over time and affect the rendering of the component. State is a key concept in React because it allows components to react to user interactions, external data updates, and other events, which then trigger re-renders of the component.

2. setState Method:
The setState method is provided by the React library and is used to update the state of a component. It is called on a component instance and takes an object or a function as an argument. The object or function describes the new state or how to compute the new state based on the current state.

3. Asynchronous State Updates:
It's important to note that state updates in React are asynchronous for performance reasons. This means that when you call setState, React doesn't immediately update the state but queues the update and may batch multiple state updates for efficiency.

4. Functional Updates:
To correctly update state based on the previous state value, React provides a functional form of setState. This form takes a function as an argument, which receives the previous state as an argument. This is especially useful when you need to perform state updates that rely on the current state. Using the functional form ensures that state updates occur predictably and in the correct order.

Here's an example of using setState:

export default function CustomComponent() {
  const [isEditing, setIsEditing] = useState(false);

  function handleEditing() {
    setIsEditing(() => !isEditing);
  }

  return <button onClick={handleEditing}>{isEditing ? "Save" : "Edit"}</button>
}

In this example React manages the state of an "isEditing" boolean variable, and it toggles its value between true and false when a button is clicked.

Here's a breakdown of what this code does:

• The useState hook is used to initialize the isEditing state variable with an initial value of false.

• The handleEditing function is defined. When the button is clicked, it toggles the isEditing state by using the functional form of setState, which takes the previous state as an argument and returns the new state value based on the previous state. In this case, it toggles the value from true to false or from false to true.

• The button's text content is conditionally rendered based on the value of isEditing. If isEditing is true, the button displays "Save"; otherwise, it displays "Edit."

This code is a straightforward and valid way to manage state and handle state updates in a functional React component. It follows the best practice of using the functional form of setState to correctly update state based on the previous state value, ensuring that state updates are performed in a predictable and safe manner.