# useState ![](/files/F2X5pBYOhe4mgskEHcmH) The signature for the `useState` Hook is as follows: ![](/files/KXVM3BbgYrNohWhcEawf) Here, `state` and `setState` refer to the state value and updater function returned on invoking `useState` with some `initialState`. It’s important to note that when your component first renders and invokes `useState`, the `initialState` is the returned state from `useState`. ## Declare State Variable {% hint style="warning" %} **Always remember that the value of the state is always the initial state value on the first render** {% endhint %} ```jsx const [state] = useState(100) return
State variable is {state}
``` ## Update State Variable Also, to update state, the state updater function `setState` should be invoked with a new state value, as shown below: ![](/files/6KSc6htQhDL9ghT17OX8) By doing this, a new re-render of the component is queued. `useState` guarantees that the `state` value will always be the most recent after applying updates. ![](/files/2czauHpD5eb9EYSUdFXA) For referential checks, the `setState` function’s reference never changes during re-renders. {% hint style="info" %} **If you try to update state with the same value as the current state, React won’t render the component children or fire effects, e.g., `useEffect` callbacks. React compares previous and current state via the** [**`Object.is` comparison algorithm**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description)**; if they are equal, it ignores the re-render.** **It’s important to note that in some cases, React may still render the specific component whose state was updated. That’s OK because React will *****not***** go deeper into the tree, i.e., render the component’s children.** {% endhint %} Here an example of a Counter component that use `useState` to update the counter by one for each click ```jsx const Counter = () => { const [counter, setCounter] = useState(0) const handleClick = () => setCounter(counter + 1) return (
Counter:{counter}
) } ``` ### Functional updates The state setter function returned by `useState` can be invoked in two ways. The first is by passing a new value directly as an argument: ```jsx const [state, setState] = useState(initialStateValue) // update state as follows setState(newStateValue) ``` This is correct and works perfectly in most cases. However, there are cases where a different form of state update is preferred: ***functional updates***. Here’s the example above revised to use the functional update form: ```jsx const [state, setState] = useState(initialStateValue) // update state as follows setState((previousStateValue) => newValue) ``` {% hint style="info" %} You pass a function argument to `setState`. Internally, React will invoke this function with the previous state as an argument. Whatever is returned from this function is set as the new state. {% endhint %} When your new state depends on the previous state value — e.g., a computation — favor the functional state update. Since `setState` is async, React guarantees that the previous state value is accurate. Here’s an example: ```jsx const Counter = () => { const [count, setCount] = useState(0); return ( <>

Count value is: {count}

); } ``` In the example above, the button grows every time it’s clicked. Since the new state value depends on the old, the functional update form of `setState` is preferred. ### Lazily initializing state The `initialState` argument to `useState` is only used during your initial render. ![](/files/3fkAoT2dDailzAy6mbvm) ```jsx // subsequent prop updates are ignored const App = ({myProp}) => { const [state, setState] = useState(myProp) } // only the initial myProp value on initial render is passed as initialState. subsequent updates are ignored. ``` ### Initialize state from function If the initial state is a result of an expensive computation, you could also pass a function, which will be invoked only on initial render: ``` const [state, setState] = useState(() => yourExpensiveComputation(props)) ``` As opposed to just passing an initial state value, state could also be initialized from a function, as shown below: ```jsx const Component = () => { const [token] = useState(() => { // this will only render in first initial render const token = window.localStorage.getItem("sensetive-data"); return token || "please don't put sensetive data in local storage 😢😢😢😢" }) return
Token is {token}
} ``` ### **Use with objects** As opposed to strings and numbers, you could also use an object as the initial value passed to `useState`. Note that you have to pass the entire object to the `useState` updater function because the object is replaced, not merged.This is very different from how `this.setState` worked in classes! ```jsx function Component() { const [state, setState] = useState({ name: "Mayssa" }); const updateState = () => setState({ occupation: "Teacher" }); return ( <> 
{JSON.stringify(state)}
); } ``` So in order to add an property to the object, we’re using the ES6 spread operator `...` to copy the existing properties into the new object, ```jsx const updateState = () => { setState((prevState) => ({ ...prevState, occupation: "Teacher" })); }; ``` Pass a function to `setState` and return a merged object by using the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) ([`Object.assign` also works](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)). ### **Use with arrays** Remember: state can hold any kind of value! Here’s an example of useState holding an array. Typing into the box and hitting Enter will add an item to the list. ```jsx function ListOfThings() { const [itemsList, setItemsList] = useState([]); const [itemName, setItemName] = useState(""); const addItem = event => { event.preventDefault(); setItemsList([ ...itemsList, { id: itemsList.length, // just for the sake of the example , never put the index of the item in the array as an id name: itemName } ]); setItemName(""); }; return ( <>
); } ``` Notice we’re calling useState with an initial value of an empty array `[]`, Such as objects, in order to add an item to the array, we’re using the ES6 spread operator `...` to copy the existing items into the new array, and inserting the new item at the end. ### **M**ultiple calls to useState If you want to store multiple values in a function component, you’ve got a couple options: * call `useState` more than once * shove everything into an object There’s nothing wrong with calling `useState` multiple times, and in most cases, that’s how I store multiple values. Once you get over 4 or 5 useState calls it gets a bit unwieldy, but if you’re fine with it, React is too. Multiple state variables may be used and updated from within a functional component as shown below: ```jsx const Component =() => { const [age, setAge] = useState(19) const [siblingsNum, setSiblingsNum] = useState(10) const handleAge = () => setAge(age + 1) const handleSiblingsNum = () => setSiblingsNum(siblingsNum + 1) return (

Today I am {age} Years of Age

I have {siblingsNum Multiple state variables may be used and updated from within a functional component as shown below:} siblings

) } ``` If expensive calculations are done within the body of your functional component, i.e., before the return statement, consider optimizing these with `useMemo`.(we will cover [useMemo in another section](/react-grimoire/react-hooks/usememo.md)) ## References and articles : {% embed url="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://maissen.gitbook.io/react-grimoire/react-hooks/usestate.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.