Why Do We Use useState in React?

When I started learning React I wanted to understand why we use useState instead of a normal JavaScript variable.

In JavaScript we can create a variable and change its value using a function. But changing a variable does not automatically update the value displayed on the HTML page.

Example

If we create a counter using a normal variable the value can increase when we click a button but the screen will not update automatically.

In React we use the useState hook to solve this problem.

How Does useState Work?

First we need to import useState from React.

import{ useState } from "react";

Then we can create a state variable.

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

Here count stores the current value and setCount is used to update that value.…