Categories
javascript reactjs

React.js – What is State ?

Hey guys 👋🏻,
In this post, let us cover an introduction to State in React.js.

For this post we will understand
✔What is State in React ?
✔ Example for creating State in React.
✔ Accessing the State
✔ Using setState and understanding its pitfall.
✔ Using setState with callback to resolve the pitfall.

Image description

Introduction to State

Every component manages its own state. With the introduction of React Hooks, you can also use state in functional components. But in this article, we will discuss about state in class components.

Example for creating state :

We define a state property inside the constructor function.

Image description

To access the state

To access the counter property defined in the state, we can access it in our JSX template by saying
this.state.counter

Image description

DON’T MUTATE THE STATE DIRECTLY, use setState

Image description

But there can be a problem, consider this …

Image description

setState does not always immediately update the component. It may batch or defer the update until later. Both the setState calls are enqueued when the value of counter is 0 thus causing the problem.

Let’s solve the above problem.

Image description

Use setState with callback because it is guaranteed to fire after the update has been applied. So first counter gets incremented by 1 by first setState call, once it is done, the counter is then incremented to 2. This update is done in a synchronous manner.

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

Leave a Reply

Your email address will not be published. Required fields are marked *