React and state hook

In my last post, I explained what React hooks and how they relate to the function component—a type of component that was initially known as stateless components. Today, with hooks, they can have it. For that, you can use the useState hook, which is the topic of this post: state hook and how to use it.

Basic usage

As said in the last post, react hooks are functions. And you use them as one. You invoke them with one parameter, the initial state. What you get as a result is the current value and a function to update it. I named my function setCounter. But the name of the function can be anything. Prepending it with a set is recommended. And it makes sense since you are setting a new value with that function.

Example, a counter component with value incremented with a click:

import {useState} from 'react';

function State() {
    const [counter, setCounter] = useState(0);

    return (
        <div>
            <div>{counter}</div>
            <div>
                <button onClick={() => setCounter(counter + 1)}>Increment</button>
            </div>
        </div>
    )
}

Multiple states

The example above uses one state, counter value. But there could be multiple values. Maybe custom step value so you don’t increment each time by one. Doing this is just a matter of calling useState again and getting new value and function pair. It is an excellent example of how using hooks improves your code. When using class components, you would need to use a whole state object when you want to update only one part.

Example, a counter component with custom increment value:

import {useState} from 'react';

function CustomStepCounter() {
    const [counter, setCounter] = useState(0);
    const [stepValue, setStepValue] = useState(1);

    return (
        <div>
            <div>{counter}</div>
            <div>Step value: <input type="text" onChange={ev => setStepValue(parseInt(ev.target.value))}/></div>
            <div>
                <button onClick={() => setCounter(counter + stepValue)}>Increment</button>
            </div>
        </div>
    )
}

Lazy initialization

Sometimes you might need to do some expensive function to get the initial state. That function can be an argument to the useState function, and its result is the initial state value. It is not a place where you can put any async call as it does not allow that type of function. You can use it for converting some array into a different shape that is suitable for your state.

import {useState} from 'react';

function LazyCounter() {
    const [counter, setCounter] = useState(() => {
        // this could be any value
        return 0;
    });

    return (
        <div>
            <div>{counter}</div>
            <div>
                <button onClick={() => setCounter(counter + 1)}>Increment</button>
            </div>
        </div>
    )
}

You can find code from this post in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.