How to Use useState

What is useState?

useState is probably the most fundamental hook in React. It solves the following situation:

I want this component to keep a value and be re-rendered whenever that value changes.

The concept of state

We can simplify the idea of state in React as how data is stored at a given moment. Data can change constantly from one render to another.

Parameters

The conceptual signature of useState is

useState(initialState) -> [state, setState]

It takes a single parameter, the initial state, which can be practically any value.

Return value

It is an array of exactly two elements [value, setValue]. By convention, the variables follow this pattern something, setSomething. The returned elements represent:

1. The current state
2. The function to update the current state

The set function can also be used to manipulate the current value.

setAge(a => a + 1); where a is the current state value.

Practice

Notes

• It can only be called at the top level of the component. It cannot be invoked inside conditionals, loops, or nested functions.
• In Strict Mode, React will run useState twice.