There are many JavaScript framework and library in JS world and every framework and library has a different way to handle data flow. React has a different way to handle data flow which makes it different compare to other framework and library.

If we want to share data between component, we can use props in react. Which you can learn and understand from my previous post. With props, we can pass data from parent to child component and utilize its value, but we can not alter its value and can not send data back to parent from child component.Because props is a read only object as well as data with props is passed in uni-directional flow.

But sometimes we also want to utilize data within component itself as well as we also want to alter its value. To achieve this dynamic behaviour we can use state in react.

Let's begin to understand what is state and how to use it in react.

What is state

1. State is a JavaScript object in react which holds dynamic data inside component between different render cycle.
2. Unlike props this object is private to component.
3. Before react version 16.8 state can only be used within classes. But after 16.8 we can use state in functional component with useState hook. Hooks is all together is a standalone topic which we will cover in future post. But we will learn how to use useState hook in this post.

Let's understand how to use state in react with a small project(Create a click counter).

Understand state with class based approach.

1. Let's create a class name App which will extends react component.

Props in the App class is an object which will hold all the attribute data passed to App component.
In class base component props is passed to constructor function.
To utilize props in the component we must need to call super function and should pass props as argument of it.

1. Define state in constructor which will hold an object with key count and its initial value as 0.

1. Let's define a render function in class component and whatever render function will return will render inside Dom element

1. Add a p tag which will hold count variable and wrap count variable with interpolation({}) to render it in Dom. Also add button element which will call increment function on click of button.

1. Now add increment function inside class and call this.setState function which will increment count variable from its previous value by one.

This is our full code which will increment count value by one and also re render component into Dom every time count value is changed.

Full code can be viewed over here.

Understand state with function based approach.

Note: State can be used in functional component using useState hook.

1. Let's create a function name App and import react and useState hook from react.

1. Define useState hook inside component and pass 0 as it's initial value inside useState argument. useState hook will return an array which first value will be initial value of the hook and second value will be function with which we can alter the value of the state variable value returned by useState hook.

Over here we had used destructuring to destructure the returned array value.
You can read more about destructuring over here

1. Let's return a jsx element from the component and whatever function will return will render inside Dom element

1. Add a p tag which will hold count variable and wrap count variable with interpolation({}) to render it in Dom. Also add button element which will call increment function on click of button.

1. Now add increment function inside component and call setCount function which will increment count variable from its previous value by one.

This is our full code which will increment count value by one and also re render component into Dom every time count value is changed.

Full code can be viewed over here.

Conclusion

If we want to update the component we can use state in react.
For this we can take two approach either by using class or by using function.
It's totally depends on us which approach we want to take.

Hope this will be helpful for you.
Keep learning.