useState Hook In React

#react #reactnative

A simplified version of probably the most important hook in react
Before reading this article it is very important that you should have a basic knowledge of React and how to run a react app on your laptop. If you do not know that, I will recommend reading my article on getting started with React so that you have the basic setup ready.

Few facts about React Hooks:
📌 React hooks can only be used in functional components because class components have their own way of doing what react hooks do.
📌React hooks cannot be called conditionally they should always be put in exact same order as you want them to be called for example.

function App() { if(true){ useState() }

Now the above code will give an error as “React Hook useState is called conditionally”. React hooks must be called In the exact same order for every component render.
useState Hook:
import the useState hook from React like this:
import {useState} from ‘react’ ;
Just call it in a function and pass the default state. useState always returns an array with 2 values. The first thing in the array is always the current state and the second is the function that will allow you to update the current state to the next state.

const [count, setCount] = useState(initialState)

Now write a function setCount inside decrementCount as:

function decrementCount() { setCount(prevCount => prevCount-1) }

Here, the prevCount is storing the last count and we are not using count-1 because count stores the default state and if we use setCount twice in a row they will only over-write each other and not make any difference.
Similarly, create a function for incrementing:

function incrementCount() { setCount(prevCount => prevCount+1) }

2 ways of calling useState Hook:
The first way is to directly pass the default value at the start and the second way is to use the functional way of doing it so that our function does not run every time we re-render our component. If the initial state has very slow computation and we do not want our website to slow down we should use the function version so that it runs only one time.
What to do if you want to use objects as default states?
You all must be wondering if we can just update the part of the object we want to change and leave what should not be touched while using hooks. The answer is NO!
In functional components, while using hooks we have to spread the initial stage and then update the objects we want to change. If you are using objects inside of a state please remember to update the old values as well because they do not get updated automatically. We can do it as follows:

```function App()
{
const [state, setState] = useState({count:4 , theme: "blue"})

function decrementCount()
{
setState(prevState =>{
return{ …prevState , count: prevState.count-1)
})
}```

…prevState is to update the old values.
It is a common practice to use multiple state hooks for handling different things so that each part can be handled individually without any problems.
We can use multiple hooks for count and theme as follows:

import React, {useState} from 'react'; function App() { const [count, setCount] = useState(4) const[theme, setTheme] = useState(“blue”) function decrementCount() { setCount(prevCount => prevCount-1) setTheme("red") } function incrementCount() { setCount(prevCount => prevCount+1) } return( <button onClick={decrementCount}>-</button> <span>{count}</span> <span>{theme}</span> <button onClick={incrementCount}>+</button> ) }