writingsabout

A

AZRULAZIZ

JavaScript Developer

Intro to React useState hooks

05 August, 2019

What is useState?

useState is a not-so-new API in react that allow us to use state inside a functional component. Previously using state inside functional component is not possible. React developers alike need to go thru the hassle of converting functional component into class based component if they need to use state. Now with the introduction of react hooks, the days of rewriting components just for the sake of using state are long gone.


How to start using the useState hooks?

First make sure that you have updated react to the latest version or at least the 16.8 version. Then import the useState hooks from within react itself, no other dependecies needed.

import React, {useState} from 'react';

Then lets initialize this hooks. Call and assign it to a variable. Pass in a value inside the parentheses, this value will be the initial value of this state.

In comparison with state inside class based component, the type of the value doesnt need to be an object. It can be string, number, boolean etc.

const [count, setCount] = useState(4)

Here we are using array destructuring to make it easier to access the value inside that array because the useState hooks will return an array with two values.

  • The first value represents the current state that may be updated overtime.
  • The second value is the function that we can call to update that particular state.

Now if we test this in a function component, we can see the component is rendered with the value coming from the hooks that we just created.

import React, {useState} from 'react';

const Number = () => {
    const [count, setCount] = useState(4)

    return (
        <div>
            <p>{count}</p>
        </div>
    )
}

Lets make use of the second value that is return which is the function to update the state. Add a button that will handle the state update.

import React, {useState} from 'react';

const Number = () => {
    const [count, setCount] = useState(4)

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>update</button>
        </div>
    )
}

So now when we click the button, it will update the state in the same way setState works inside class based component. But with useState hooks, each function will only handle the value of a state that is assigned together with it during the hooks initialization.


We can simply add more useState hooks if we need to. useState is designed to be called many times and every instance of it is independent from one another. Lets modify the code and add another state.

import React, {useState} from 'react';

const Number = () => {
    const [count, setCount] = useState(4)
    const [name, setName] = useState("Lily")
    return (
        <div>
            <h1>Name: {name}</h1>
            <input type="name" value={name} onChange={(e) => setName(e.target.value)} />
            <p>Age: {count}</p>
            <button onClick={() => setCount(count + 1)}>update</button>
        </div>
    )
}

We can see here how we can create & update multiple state just like how setState works inside class based components.
However just be aware that things can get out of hands if there are too many state + functions that needs to be managed individually. When you reach that point, its time to reach for another hooks called useReducer which I will be writing about in the near future.