Understanding State in React

When we start building a react application, we break our application into multiple components. So, there is an App Component which is the main component and we then add the remaining components inside to build our application.

So, before we go to state let us learn about props.

Props is basically a way to pass data between components.

Suppose, we define a const name in App Component like as follows:

const name = “Kunal Sharma”

Now how to pass this data to the child components?
The answer to this is, we can do it by using props.

For eg. if I want that name in my header component I can just write:

<Header name={name}>

Now, if I am using function based header component what I can do is just write props in the parenthesis.

const Header = (props) => (
return <h3>{props.name}</h3>
);

By this way I can pass as much information as I want.

Note: We can only pass props in one direction i.e. from parent to child.

Now let’s come to state.

State is a JavaScript object that contains a piece of data. You can imagine it as a variable in react app. The difference is though that this state or variable reacts to changes. So, if something happens in our app. If that piece of variable or state gets updated, the component is automatically going to re-render and your component is going to react to that change.

For eg. If we take a counter variable initialized as 0. Also, we have an increment function to add 1 to the counter variable. Now, lets create a button to increment the counter and what we see in the view is variables in react don’t react to changes. But if we console log the steps you are going to see the value of counter is getting incremented.

However, if we use state react automatically is going to know what parts of the UI to re-render and this makes react super powerful and fast.

Now when we talk about state usage in previous versions of react, we could create a state only in a class component. So, state was private and fully controlled by the component. The most important benefit of state became its ability to be modified or get updated.

There are two ways to initialize the state in a react component:

1) Directly inside class (without constructor)

Directly inside class:

Class Student extends Component{
//States – Here it is a class property
state = {
name : “Kunal Sharma”,
rollNo: this.props.rollNo
}
render(){
return(
<h1>Hello {this.state.name} your roll number is {this.state.rollNo}</h1>
)
}
}

2) Inside the constructor (with constructor)

Inside the constructor:

Class Student extends Component{
constructor(props){
//It is required to call the parent class constructor
super(props);
//States
this.state = {
name : “Kunal Sharma”,
rollNo: this.props.rollNo
}
}
render(){
}
}

When the component class is created, we know that the constructor is the first method called, so it’s the right place to add state and also class instance has already been created in memory, so you can use this to set properties on it.
Note: When we write a constructor, make sure to call the parents class’ constructor by super(props) as when you call super with props React will make props available across the component through this.props.

Updating a State

setState() Method is used to update states.

this.state = {
name : “Kunal Sharma”
}
this.setState({
name: “Kunal”
});

Second form of setState() method:

this.setState(function(state,props){
return{
};
});

It accepts a function rather than an object.
It receives the previous state as the first argument and props at the time the update is applied as the second argument.

But now after the release of React Hooks in React 16.8 we can also use the capabilities of the state in a function based component as well.

So, to use state in function based components we import useState from the react library.
Suppose, continuing the counter example:

const [counter, setCounter] = useState(0)

-Here, 0 is the basically the initial data we want to use.
-counter is the actual piece of state.
-setCounter is the function that allows us to change the counter.

So, make sure that you don’t increment the counter as counter += 1 and use setCounter instead.

setCounter((prev) => prev + 1);
//or setCounter(counter + 1);

Now, it actually works.

Note: We can only pass state in one direction i.e. from parent to child and state is dependent on one component.

Conclusion

State in a react application is a object that contains information that may change in its lifetime and gets reflected in the view automatically.

That's it for this post.