Before understanding what is a react useState
hook, let us first know what is a hook?
What is a hook?
Hooks are a feature of react which allows us to use state and other React features without writing a class. React hooks can only be used in the functional components.
What is useState
hook?
useState is a react hook which is used to add a state variable to our components. It means that we can now declare state variables to functional components.
Syntax to declare useState
hook
const [state, setState] = useState('Initial Value');
Where to use useState hook
Let us simply understand this using an example. Let say we are working on a hamburger menu.
import React from 'react';
export const MyComponent = () => {
// BAD ❌ - this way it won't work, We need to use useState hook in such situation
let openHamburger = false;
const toggle = () => {
openHamburger = !openHamburger;
}
return (
// ...
)
}
Whenever we want to change the value of a variable and then after we want to use that, then we need to use useState
hook.
import React, { useState } from 'react';
export const MyComponent = () => {
// GOOD ✅
const [openHamburger, setOpenHamburger] = useState(false);
const toggle = () => {
setOpenHamburger(!openHamburger);
}
return (
// ...
)
}
Where we can use useState
hook?
- We can use
useState
hook only in functional components, not in class components. - We want to change the value of a variable and then after we want to use that.
- Every time a components run, the
useState
hook also runs in the exact same order in which it is written. - We cannot put hooks inside if statements, or inside any functions or inside loops or it should not be nested in any things. It should be present in the top level of the functional components.
How to use useState
hook?
-
useState
hook always returns an array with two values. The first is state and the second value is a function. - The function which is
useState
returns is used to change the state. - Every time we call the update function of the
useState
, it re-renders the components with the updated state value. - Every time when we need to use the previous value to create the new value, we need to use the function version of setting the state.
const [count, setCount] = useState(6);
const inc = () => {
setCount(prevCount => prevCount + 1); // setCount(6 => 6 + 1)
}
-
useState
can also be used in other way by passing function in it. And this will run only once when the component is rendered first time.
const [state, setState] = useState(()=> 6); // by doing this way, whenever we update the state value, the component will not re-renders.
I hope this blog will help you to understand useState
hook.
Top comments (0)