reactjs(useState Hook)

The useState Hook returns the state value and the setter function that will allow us to modify the state value returned.

Below is the syntax for useState Hook:

const [state, setState] = useState(initialState); // this is a Javascript destructuring happing here, useState function will return the state value and assign it to state variable i.e of const type & a setter function as setState.

Basically the below sample code shows the three steps used to implement useState hook.

Step1: import {useState} from 'react'.

// the below code should be inside functional component.

Step2: const [count, setCount] = useState(initialCount); // here useState returns state value and assigns it in count variable, and also return a setter function i.e assigned to setCount variable.

Step3: <button onClick={() => setCount(initialCount)}>Reset</button>; // calling the setCount function to update the initial state.

The below sample code shows the basic implemention of usestate hook for incrementing, decrementing & reseting counter variable in a functional component also making use of previous count value .

//sample code starts here

function Counter({initialCount}) {

const [count, setCount] = useState(initialCount); // returns state variable and setter function & gets assigned using es6(javascript) destructuring.

return (

<> Count: {count}

<button onClick={() => setCount(initialCount)}>Reset</button>

<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button> // here on minus(-) button click the function is getting called, where we are passing a function inside setcount setter function which will provide the previous state value as a first parameter ad then we can make use of it, for our logic as in this case we are using previous state value to update the counter.

<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button> </> );

}

// sample code ends here

Thanks.