useState

useState 🦄

Notes: -useState lets you use local state within a function component.

• Call signature: const [state, stateUpdaterFunction] = useState(initialStateValue)
• View the docs.

Declare State Variable

Declaring a state variable is as simple as calling useState with some initial state value.

Update State Variable

Updating a state variable is as simple as invoking the updater function returned by the useState invocation.

Copy
const [stateValue, updaterFn] = useState(initialStateValue);

Multiple State Variables

Multiple state variables may be used and updated from within a functional component as shown below:

Use Object State Variable

As opposed to strings and numbers, you could also use an object as the initial value passed on to useState.

Nb: You have to pass the entire object to the useState updater function as the object is replaced NOT merged.

Copy
// 🐢 setState (object merge) vs useState (object replace)
// assume initial state is {name: "Ohans"}

setState({ age: 'unknown' })
// new state object will be
// {name: "Ohans", age: "unknown"}

useStateUpdater({ age: 'unknown' })
// new state object will be
// {age: "unknown"} - initial object is replaced
 {age: "unknown"} - initial state object is replaced

Initialize State from Function

As opposed to just passing an initial state value, state could also be initialized from a function as shown below:

Functional setState

The updater function returned from invoking useState can also take a function similar to the good ol' setState.

Copy
const [value, updateValue] = useState(0)
 // both forms of invoking updateValue below are valid 👇

 updateValue(1);
 updateValue(previousValue => previousValue + 1);

This is ideal when the state update depends on some previous value of state.