Understanding React State and setState()

July 07, 2025

State is a fundamental concept in React that allows components to store and manage dynamic data. While props enable you to pass data from parent to child, state lets a component track and update its own changing data over time. Understanding how state works — and how to update it with setState() — is essential to building interactive, responsive React applications.

What is state in React?

State is an object managed within a component that determines how that component renders and behaves. For example, you might store user input, UI toggles, or fetched data in state.

In class components, you define initial state in the constructor:

class Counter extends React.Component {

constructor(props) {

super(props);

this.state = { count: 0 };

}

// ...

}

In functional components with React hooks, you use useState:

import { useState } from 'react';

function Counter() {

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

// ...

}

Updating state with setState()

In class components, you use this.setState() to update state:

increment = () => {

this.setState({ count: this.state.count + 1 });

};

Key points about setState():

✅ Merges state — setState() updates only the properties you specify, merging them with the existing state object.

✅ Asynchronous — Updates to state may be batched for performance, meaning this.state may not immediately reflect changes after calling setState().

✅ Optional callback — setState() accepts a second argument: a callback function executed after the state update is complete.

Example with a callback:

this.setState(

{ count: this.state.count + 1 },

() => console.log('Count updated:', this.state.count)

);

Functional setState updates

When the new state depends on the previous state, always use the functional form to avoid stale state bugs:

this.setState((prevState) => ({

count: prevState.count + 1

}));

State in functional components with hooks

With hooks, you update state directly by calling the setter function:

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

const increment = () => {

setCount(prevCount => prevCount + 1);

};

Conclusion

State and setState() are the backbone of dynamic React applications. By understanding how to initialize, update, and manage state, you can build responsive interfaces that reflect your app’s data in real time.

Learn React js Training Course

What is React JS and Why Should You Learn It?

Key Features That Make React JS Popular

How to Use create-react-app to Bootstrap Projects

Components in React JS: Functional vs Class

Visit our Quality Thought Training Institute

Get Direction