ReactJS setState()

In React, setState() is used to update a component’s state, since state is immutable and cannot be modified directly. When called, it schedules a state update, re-renders the component, and updates the UI. Its main advantage is declarative rendering, where React automatically handles DOM updates based on state changes.

Syntax

this.setState(updater, callback);

• updater: An object or a function that represents the changes to be applied to the component's state.
• callback (optional): A function that is executed once the state has been updated and the component has re-rendered.

How Does setState() Work

• Triggers Re-render: When setState() is called, React schedules an update to the component’s state and triggers a re-render. The updated state is reflected in the component’s output.
• Merging States: setState() merges the new state with the current state. This is especially useful when you only want to update part of the state, leaving other properties intact.
• Asynchronous Updates: setState() updates the state asynchronously, meaning the changes don't happen immediately. React batches the updates for performance reasons, and the re-render will happen once all the updates have been processed.

For Example: Incrementing a Counter

Output

In this code

• setState() is called inside the increment method to update the count state when the button is clicked.
• This triggers a re-render, and the updated count is displayed on the UI.

Common Usage of setState()

1. State Merging

React automatically merges the state passed to setState() with the existing state. This means that when you update part of the state, React will retain the other parts of the state that weren't changed.

Output

In this code:

• The updateUser function updates only the name inside the nested user object while keeping the existing age unchanged using the spread operator.
• The toggleLogin function updates the loggedIn value independently without affecting the user object.

2. Function State Updates

You can also pass a function to setState(), which is useful when the new state depends on the previous state. This function will receive the previous state and props as arguments and should return the updated state.

Output

In this code

• When the "Increment" button is clicked, the increment method updates count using setState() with a function that ensures the update is based on the previous state (prevState). This prevents errors from using stale state values.

3. Updating Attributes

When updating state with setState(), you can modify the attributes of the current state, adding or changing values as needed.

Output

In this code

• Initial state shows a default greeting; clicking the button updates it using setState.
• updateState is bound in the constructor so this correctly refers to the component.
• UI renders the greeting text along with a button that changes the message when clicked.

4. Updating state values using props

Props in React pass data from parent to child. They are immutable, but can influence the child’s state, enabling dynamic, data-driven UI updates.

Output

In this code

• defaultProps provides a list of topics, while state starts with "React js Test" and an empty topics.
• updateState() updates the state to show the topic list, using listOfTopics() to map and render items.
• Clicking the button triggers the update and displays all test topics.

setState() is Asynchronous

One of the most important things to understand about setState() is that it is asynchronous. When you call setState(), React doesn't immediately update the state. Instead, it batches multiple state updates and processes them later in an optimal way.

However, React provides a callback function that you can pass to setState() to run code after the state has been updated and the component has re-rendered.

Best Practices

• Use Functional setState() for Previous State: Use the function form when updating state based on the previous state.
• Avoid Direct State Modifications: Always use setState() for updates.
• Batch Updates: Minimize re-renders by batching state updates.
• Avoid Mutating State: Create new copies of state objects using spread operators.
• Use Callbacks: Utilize the callback to handle actions after state updates.