What is State in React?
What is State in React? State is a JavaScript object that stores component’s dynamic data and it enables a component to keep track of changes between renders. Because state is dynamic, it is reserved only for interactivity so you don’t use it for static React projects.
Components defined as classes have some additional features. Local state is exactly that: a feature available only to classes. State can only be used within a class and usually the only place where you can assign this.state is the constructor.
Important Announcement – EasyShiksha has now started Online Internship Program “Ab India Sikhega Ghar Se”

class Greeting extends React.Component {
constructor() {
super();
this.state = {
name: ‘John Smith’
}
}
render() {
return<h1>Hello, my name is { this.state.name }</h1>;
}
}
class Greeting extends React.Component {
state = {
name: ‘John Smith’
}
}
render() {
return <h1>Hello, my name is { this.state.name }</h1>;
}
}
State Updates May Be Asynchronous
What is State in React? React may batch multiple setState() calls into a single update for performance. Calls to setState are asynchronous when they are inside event handlers and that when you don’t rely on this.state to reflect the new value immediately after calling setState.
Top Courses in Software Engineering
More Courses With Certification
incrementCount() {
// Note: this will *not* work as intended.
this.setState({count: this.state.count + 1});
}
handleSomething() {
// Let’s say `this.state.count` starts at 0.
this.incrementCount();
this.incrementCount();
this.incrementCount();
// When React re-renders the component, `this.state.count` will be 1, but you expected 3.
// This is because `incrementCount()` function above reads from `this.state.count`,
// but React doesn’t update `this.state.count` until the component is re-rendered.
// So `incrementCount()` ends up reading `this.state.count` as 0 every time, and sets it to 1.
To fix it, use a second form of setState that accepts a function rather than an object to ensure the call always uses the most updated version of state. i hope now it’s clear to you What is State in React?
Passing an update function allows you to access the current state value inside the updater. Since setState calls are batched, this lets you chain updates and ensure they build on top of each other instead of conflicting:
incrementCount() {
this.setState((state) => {
// Important: read `state` instead of `this.state` when updating.
return {count: state.count + 1}
});
}
handleSomething() {
// Let’s say `this.state.count` starts at 0.
this.incrementCount();
this.incrementCount();
this.incrementCount();
// If you read `this.state.count` now, it would still be 0.
// But when React re-renders the component, it will be 3.
}
Also you can pass props as a second argument at the time the update is applied:
// Correct
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
State Updates are Merged
When you call setState(), React merges the object you provide into the current state.
For instance, your state may contain several independent variables:
constructor(props) {
super(props);
this.state = {
posts: [],
comments: []
};
}
Then you can update them independently with separate setState() calls:
componentDidMount() {
fetchPosts().then(response => {
this.setState({
posts: response.posts
});
});
fetchComments().then(response => {
this.setState({
comments: response.comments
});
});
}
The merging is shallow, so this.setState({comments}) leaves this.state.posts intact, but completely replaces this.state.comments.
You might be asking what is ComponentDidMount() and how it is used. It is a method that is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. So if you need to load data from a remote endpoint (API), this is a good place to instantiate the network request.
Empower your team. Lead the industry
Get a subscription to a library of online courses and digital learning tools for your organization with EasyShiksha
Request NowQ. Are EasyShiksha's internships truly free?
Yes, all internships offered by EasyShiksha are completely free of charge.
Q. How can I apply for an internship with EasyShiksha?
You can apply by visiting our website, browsing available internships, and following the application instructions provided.
Q. What types of internships are available through EasyShiksha?
EasyShiksha offers a wide range of internships across technology, business, marketing, healthcare, and more. Opportunities are continuously updated.
Q. Will I receive a certificate upon completing an internship?
Yes, upon successful completion, you will receive a certificate recognizing your participation and achievements.
Q. Are EasyShiksha's internship certificates recognized by universities and employers?
Yes, the certificates are recognized by universities, colleges, and employers worldwide.
Q. Is the download of certificates free or paid?
Access to internships and courses is free, but there is a small fee to download certificates, covering administrative costs.
Q. When can I start the course?
You can choose any course and start immediately without delay.
Q. What are the course and session timings?
These are fully online courses. You can learn at any time and pace. We recommend following a routine, but it depends on your schedule.
Q. What will happen when my course is over?
After completion, you will have lifetime access to the course for future reference.
Q. Can I download the notes and study material?
Yes, you can access and download course materials and have lifetime access for future reference.
Q. What software/tools would be needed for the course?
All necessary software/tools will be shared during the training as needed.
Q. I’m unable to make a payment. What should I do?
Try using a different card or account. If the problem persists, email us at info@easyshiksha.com.
Q. Do I get the certificate in hard copy?
No, only a soft copy is provided, which can be downloaded and printed if required.
Q. The payment got deducted but shows “failed”. What to do?
Technical errors may cause this. The deducted amount will be returned to your account in 7-10 working days.
Q. Payment was successful but dashboard shows ‘Buy Now’?
Sometimes payment reflection is delayed. If it takes longer than 30 minutes, email info@easyshiksha.com with the payment screenshot.
Q. What is the refund policy?
If you face technical issues, you can request a refund. No refunds are issued once the certificate has been generated.
Q. Can I enroll in a single course?
Yes, select the course of interest, fill in the details, make payment, and start learning. You will also earn a certificate.
Q. My questions are not listed above. I need further help.
Contact us at info@easyshiksha.com for further assistance.
What is State in React? As you can see in the above example the properties for this.state are now independent and separately added this.setState , passed an object to each property and surrounded them by ComponentDidMount() where they will be added to the DOM tree after we get the response from the fetchPosts() and fetchComments().
I hope you like this blog, What is State in React? To learn more visit HawksCode and Easyshiksha.
ALSO READ: 3-indias-engineering-graduates-land-high-quality-tech-jobs
Get Course: Digital-Marketing-Fundamentals-SEO