What is setState in React?

Key takeaways:

Class components use setState, while function components use useState, a simpler and modern approach.
setState updates the state and triggers React to re-render the component with the new state. React batches multiple setState calls for performance optimization, meaning updates may not happen immediately.
The functional form of setState should be used if the new state depends on the previous state. setState performs a shallow merge of the update object into the existing state, preserving other state properties.
The setState method accepts an object or a function to update the state and an optional callback function to run after the state update and re-rendering are complete.
Class components require setState and life cycle methods, making them more complex. Function components with Hooks like useState are modern, simpler, and preferred.

In React, components can have a state, which represents the dynamic data that changes over time. For example, a state might store information like whether a user is logged in, the color to display for a button, or the current count in a counter component. The state directly influences what is displayed in the UI. When the state changes, React rerenders the component to reflect the updated state in the UI.

In class components, the setState method is used to update the component’s state. In function components, we will instead use the useState() Hook for managing state. You can learn more about useState here.

How does `setState` work in React?

The setState method in React allows us to enqueue changes to the component’s state and informs React that the component and its children need to rerender with the updated state. This is the primary method you should use for state management in class components to update the UI. Notably:

Asynchronous updates: The setState method doesn’t always update the component immediately. For performance reasons, React may batch multiple state updates and defer rerendering until later. As a result, we should not rely on the current state directly after calling setState—use the function form of setState (described below) if the new state depends on the previous state.
Shallow merge: When we call setState, React performs a shallow merge of the object you provide with the current state, rather than replacing the entire state object. This means that only the properties you specify in setState will be updated, leaving other properties in the state intact. This shallow merging approach is useful for managing complex state without having to recreate all state properties every time.

Syntax of `setState`

The syntax of the setState is:

setState(updater, [callback])

Parameters of `setState`

updater: This can be an object or a function.
- When passing an object, setState merges it into the current state, and we don’t need access to the latest state values. For example:
```
this.setState({ count: 2 });
```
- When passing a function, we provide a function with the signature (state, props) => stateChange. This function receives the current state and props and returns the updated state. This form is especially useful when the new state relies on the previous state:
```
this.setState((state, props) => {
  return { count: state.count + props.step };
});
```
callback (optional): An optional callback function that runs after the state has been updated and the component has re-rendered. This can be useful if we need to perform an action after the state change is complete, like focusing an input or logging data.

Code explanation

This example demonstrates how setState makes it easy to manage state changes within React class components. In App.js:

Lines 3–30: We define the Counter class component.
- Line 6: We initialize the state and set count to 0 in the constructor.
- Lines 10–14: The incrementCount method updates count by adding the step prop, using setState to ensure the component rerenders with the new state.
- Lines 17–19: The resetCount method resets count back to 0 using the setState method.
- Lines 21–29: The render method displays count and includes buttons to increment and reset the count. The increment button uses step as the increment value, which is passed as a prop from App.
Lines 32–34: The main App function renders the Counter component, passing step={1} as a prop, so count increments by 1 each time.

Knowledge test

Let’s attempt a short quiz to assess your understanding.

React function components vs. class components

React offers both functional components and class components. With the addition of Hooks, function components have become the preferred choice for many developers due to their simplicity and ease of use. Hooks, such as useState, enable functional components to manage state and side effects without needing the setState method used in class components. For beginners especially, function components tend to be more intuitive, aligning with modern React practices.

Conclusion

In short, setState is essential for handling state updates in React class components. By managing the state effectively with setState, we can create responsive and interactive UIs in React. Using both the object and function forms of setState provides flexibility in handling synchronous and asynchronous updates, allowing React to optimize rerendering for better performance. Understanding how setState works and when to use each form is fundamental for effective state management in React class components.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

When should we use the function form of setState() in React?

The function form of setState() should be used when the new state depends on the previous state. This ensures that the state is updated correctly, even if React batches multiple updates. The function takes the current state and props as arguments and returns the new state.

Can we use setState() in functional components?

No, setState() is used in class components. In functional components, state management is done using the useState() Hook. The useState() Hook provides a way to declare state variables and update them in a more concise way.

What is the importance of setState() for React performance?

setState() helps improve React’s performance by batching updates and optimizing rerenders. React only rerenders components when necessary, ensuring that the UI remains responsive even with multiple state changes. Proper use of setState() enhances both performance and user experience.

Free Resources