Using the State Hook | Tutorial for Beginners

React Hooks were introduced at React Conf October 2018 as a way to use state and side-effects in React function components. Whereas function components have been called functional stateless components (FSC) before, they are finally able to use state with React Hooks. Therefore, many people refer to them as function components now.

In short Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

In this article, we look into the React State Hook.

The State Hook

This is the most commonly used of all the built-in hooks. This is similar to this.setState, we use it to set the state of our app.
Initially, with ES6 class, we set state like this using setState:

class LoginComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            username: '',
            password: ''
        }
    }
    login() {
        axios.post('/api/login/', this.state).then((v) => {
            // ...
        }, (err) => {
            // ...
        })
    }
    render() {
        return (
            <div>
                <form>
                    <input id='username' onInput={()=>this.setState({username: this.value})} />
                    <input id='password' onInput={()=>this.setState({password: this.value})} />
                    <button onClick={()=>this.login()}>Login</button>
                </form>
            </div>
        );
    }
}

This how we define components our React apps. The props hold the inputs to the component: <LoginComponent show='true' dismiss='false' />. this.state holds the state of the component. In the this.state, it has username property, which holds the username of the user and the password property which holds the password of the user. When the user enters somethign into the inputs tag, the setState() function call is used to update the statethis.state with the current username and password.

Using hooks, the above could be done like this:

// login.component.js
import { useState } from 'react'
function handleLogin(login) {
        axios.post('/api/login/', login).then((v) => {
            // ...
        }, (err) => {
            // ...
        })
}
function LoginComponent() {
    const [loginDetails, setLoginDetails] = useState({username: '', password: ''})
    return (
            <div>
                <form>
                    <input id='username' onInput={()=>setLoginDetails({username: this.value})} />
                    <input id='password' onInput={()=>setLoginDetails({password: this.value})} />
                    <button onClick={()=>handleLogin(loginDetails)}>Login</button>
                </form>
            </div>        
    );
}

This is the equivalent of our ES6 LoginComponent class. This kind of component defined in a function is known as a stateless component, but with the arrival of Hooks, it is now possible for this stateless component to have their own states. With that, they are now called functional components.

This LoginComponent is a functional component. When we input a value in the input boxes it sets the values in the loginDetails.

The new thing here is the useState function. Let’s talk about it:

The useState is the Hook(the state hook) like we said earlier state hooks allow us to manipulate the state of our component. The useState accepts the initial state of the component as a parameter. Like in our app useState({username: '', password: ''}), the initial state is

{ username: '', password: '' }

We set our initial username and password to be empty strings, so when the user enter his username/password we store it in their respective fields above. If we had done this useState({username: 'nnamdi', password: '123456'}), then the current state will be:

{username: 'nano', password: '123456'}

We can now have a general function of the useState hook with resp. to the parameters like this:

useState(initialState)

So, pass your initial state to useState function is synonymous to doing this:

// ...
class LoginComponent extends React.Component {
    constructor() {
        this.state = {
            username: "",
            password: ""
        }
    }
    // ...
}

in ES6 component classes.
Note: The difference here is that states in this.state are stored in objects but not so in using useState. For example, if you have a component with a single integer age as a state. Using ES6 component classes, it will be represented like this:

class IntComponent extends React.Component {
    construcor() {
        this.state = {
            age: 0
        }
    }
}

Accessed and manipulated like this:

class IntComponent extends React.Component {
    // ...
    render() {
        return (
            <div>
                My age is: {this.state.age}
                <button onClick={()=>this.setState(age: this.state.age + 1)}>
                    Increment Age
                </button>
            </div>
        );
    }
}

But using the state hook, you simply pass the state age value directly:

function IntComponent () {
    const [age,setAge] = useState(0)
    // ...
}

The state here doesn’t have to be an object — although it can be if you want.
The useState returns a pair: the current state and the function that lets us update the current state.

const [loginDetails, setLoginDetails] = useState({username: '', password: ''})

Here, the loginDetails is the current state and setLoginDetails is the function that will update the state loginDetails. Since we passed {username: '', password: ''} to useState, loginDetails will be {username: '', password: ''} for the initial render. Actually, useState returns an array, the first in the array is the initial state and the last is the update function, here we destructured loginDetails and setLoginDetails from the returned array.

const stateAndUpdateFn = useState({username: '', password: ''})
const loginDetails = stateAndUpdateFn[0]
const setLoginDetails = stateAndUpdateFn[1]
// OR
const [loginDetails, setLoginDetails] = useState({username: '', password: ''})

Updating our general useState function:

const [initialState, setState] = useState(initialState)
`initialState` is the initial state of the component
`setState` is the function that updates the initialState

Updating State

Looking at our two examples,
LoginComponent

function LoginComponent() {
    const [loginDetails, setLoginDetails] = useState({username: '', password: ''})
    return (
            <div>
                <form>
                    <input id='username' onInput={()=>setLoginDetails({username: this.value})} />
                    <input id='password' onInput={()=>setLoginDetails({password: this.value})} />
                    <button onClick={()=>handleLogin(loginDetails)}>Login</button>
                </form>
            </div>        
    );
}

We used the setLoginDetails (the second returned value form the useState(…) call) to update the state {username:’’,password:’’}.
Whenever the user enters something in the input boxes, the inputChange event calls the setLoginDetails, this updates loginDetails. If the user entered:

for username => `Vnano`
for password => `957025`

loginDetails will be {username: ‘Vnano’, password: ‘957025’}
In the IntComponent example,

function IntComponent () {
    const [age,setAge] = useState(0)
    render() {
        return (
            <div>
                My age is: {age}
                <button onClick={()=>setAge(age + 1)}>
                    Increment Age
                </button>
            </div>
        );
}

When the button is clicked the setAge increments the age by one.
Notice in the examples how we don’t append this. (like we always do in ES6 classes) both to the state and to the update function. That’s one cool reason to use Hooks :).
Of course, you must call the update function with the same type as your state.

Multiple State Variables

We can have multiple state variables in our function components.
To demonstrate, we can modify our LoginComponent to manage the username and password states differently:

function LoginCoponent() {
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    // ...
}

See, we called the useState twice in the same component. We can now independently manage each state.

function LoginCoponent() {
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    // ...
    return (
            <div>
                <form>
                    <input id='username' onInput={()=>setUsername(event.target.value)} />
                    <input id='password' onInput={()=>setPassword(event.target.value)} />
                    <button onClick={()=>handleLogin(username, password)}>Login</button>
                </form>
            </div>        
    );
}

Functional Updates

We have only been passing state values to our update function. We can also update our state by passing a function to the update function.
Using our LoginComponent, let’s say we want

function LoginCoponent() {
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    // ...
    return (
            <div>
                <form>
                    <input id='username' onInput={()=>setUsername(event.target.value)} />
                    <input id='password' onInput={()=>setPassword(event.target.value)} />
                    <button onClick={()=>handleLogin(username, password)}>Login</button>
                    <button onClick={()=>setUsername(prevUsername => prevUsername + '-vboy')}>Set Username to vboy</button>
                </form>
            </div>        
    );
}

This is quite fancy, but it explains it.
We added a button to append -vboy to the username. See, the setUsername takes a function prevUsername => prevUsername + '-vboy'. The prevUsername maps to the previous value of username. The function accepts it as an argument and appends s -dinho to it.
If our previous username is vnano, clicking on the button will call the function with vnano, the returned string vnano-vboy will be the current state.

Better example will be to increment and decrement:

function IntComponent () {
    const [age,setAge] = useState(0)
    render() {
        return (
            <div>
                My age is: {age}
                <button onClick={()=>setAge(prevAge=> prevAge+ 1)}>
                    Increment Age
                </button>
                <button onClick={()=>setAge(prevAge=> prevAge - 1)}>
                    Decrement Age
                </button>
            </div>
        );
}

Lazy Initialization

Expensive initialization can cost us severely and it may lead to a bad user experience. To overcome this is to use lazy initialization. What is lazy initialization?
This is a tactic of delaying the creation of value to an identifier or object until the first time it’s needed. If the process is expensive we don’t dont initialized it immediately to avoid lag on the user’s experience. Then, when it is needed by the user it is created.

Hooks offers us the tactic of lazy initialization. If the initial state is an expensive computation. Instead of calculating the state directly and passing it to the useState:

// longOperation takes 30ms to complete
const [initialState, setState] = useState(longOperation())

We can pass a function instead, which will execute on the initial render:

// longOperation takes 30ms to complete
const [initialState, setState] = useState(()=>longOperation())

On subsequent re-renders, the longOperation is not called.

Merging Update Objects

React Hooks doesn’t merge the previous state with the current state of a component. They only return the current state and discard the previous state.
Now, how do we make use of the old state if we want to or how do we merge the two states? Remember, when we pass a function to useState it accepts an argument which is the previous state of our component. With this we can merge the states like this:

const [initialstate, setState] = useState((prevState) => {
    return {...prevState, initialState}
})

Conclusion

On this page we’ve learned about one of the Hooks provided by React, called useState. We’re also sometimes going to refer to it as the “State Hook”. It lets us add local state to React function components — which we did for the first time ever!

We also learned a little bit more about what Hooks are. Hooks are functions that let you “hook into” React features from function components. Their names always start with use, and there are more Hooks we haven’t seen yet.

Learn More

#react #reacthook #javascript