Understanding react hook-useState()

What are React Hooks and why do we need it?
Hooks are functions that let you “hook into” react state of a function and modify it . Hooks don’t work inside classes, they let you use React without classes.
It is a way of being able to make our web page interactive that have changeable state make the website more interactive.

There are three basic hook

• useState()

• useEffect()

• useContext()

In this part I've covered useState() hook.

If someone ask to write a function to increment count by clicking on button and show changes on screen that is on client side...

import React from "react";
import ReactDOM from "react-dom";

let count=0;

function increase(){
count++;
}

ReactDOM.render(
 <div className="container">
   <h1>{count}</h1>
   <button onClick={increase}>+</button>
 </div>,
 document.getElementById("root")
);

According to the above code ,clicking + button value on the screen should increase.
But it is not so, because they are not real HTML elements instead react is rendering it. So, to update count on screen we have to re-render it.

import React from "react";
import ReactDOM from "react-dom";

let count=0;

function increase(){
count++;
ReactDOM.render(
    <div className="container">
      <h1>{count}</h1>
      <button onClick={increase}>+</button>
    </div>,
    document.getElementById("root")
   );
}

ReactDOM.render(
 <div className="container">
   <h1>{count}</h1>
   <button onClick={increase}>+</button>
 </div>,
 document.getElementById("root")
);

How useState hook works?

Const [state,setState]=useState(initialState);

useState gives us back two parameters inside of an array. Use array destructuring to declare, in this order, state value, and the function that will modify that state value. You can name these two items whatever you want.

useState hook returns a stateful value, and a function to update it. During the initial render, the returned state is the same as the value passed as the first argument (initialState). The setState function is used to update the state. It accepts a new state value and add re-render of the component. During subsequent re-renders, the first value returned by useState will always be the most recent state after applying updates.

Re-iterating the above code with hook will yield the required effect without having to write a number of lines of code and So, to solve the problem of re-rendering it we use useState() hook here.

import React, { useState } from "react";

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

 function increase() {
   setCount(count + 1);
 }


 return (
   <div className="container">
     <h1>{count}</h1>
     <button onClick={increase}>+</button>
   </div>
 );
}

Both the left and right sides of the code will produce the same result. Just to highlight how useful hooks are, here's a comparison.
]