Dump Lifecycle Methods, Use Hooks: The useState hook

This is a series and you are reading part 1.

If you are accustomed to using lifecycle methods in your projects with React, I am here to tell you that you don't need them 80% of the time.

In traditional React applications (< 16.8.0), we used classes for our stateful components and functions for our stateless components.

To make a simple counter component that uses state in older versions of React, we would create a class as shown below:

import { Component } from "react";


class Counter extends Component {
    constructor(props) {
        super(props)

        this.state = {
            count: 0
        }

        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        // Destructure count from state
        const { count } = this.state

        this.setState({
            count: count + 1
        })
    }

    render() {
        // Destructure count from state
        const { count } = this.state

        return (<div>
            <div> Current count: {count} </div>
            <button onClick={this.handleClick}>Click Me</button>
        </div>)
    }
}

This would yield this:

The only thing I can say about this code snippet is “this is an awful lot of boilerplate code to create something so simple”.

The issues with class-based components go beyond just boilerplate code. The React website has already done an awesome job explaining what these issues are.

To solve all of these issues, the React team introduced a new feature called hooks. This guide will cover one of many hooks and we will learn more about hooks as we go through this series.

To create a page identical to what we had in our class component with hooks, all we need is the code below

import { useState } from "react"


function Counter(props) {
    // Destructure the count and setCount variables out 
    // of the hook with array destructuring
    const [count, setCount] = useState(0)

    // Now we can use those values easily withing out jsx code.
    return (<div>
        <div> Current count: {count} </div>
        <button
            onClick={() => 
                 setCount(prevCount => prevCount + 1)
            }
        >Click Me</button>
    </div>)
}

We firstly call a hook and destructure its returned values into variables which we have called count and setCount. With the useState hook, the first element is always the value and the second element is always the function for setting the value.

We then display the value of the count variable in the div and use the setCount method to update the value of the count variable. DO NOT try and update the count variable directly.

There are two ways of using the setCount method.

One of those ways is by supplying a direct value that will replace the current value as demonstrated below

// This will change the value of count to 5
setCount(5)

Another way (which is what we have done), is to pass another function that takes the previous value as a parameter. This is especially useful if you want to use the previous value for some calculations as we have done. It is done as shown below:

// This will add 1 to the current value of count 
setCount(prevCount => prevCount + 1)

As demonstrated, this is far shorter and more simple to understand than what we had before. It is a massive improvement and honestly, I would prefer looking at this to class-based components any day.

Hooks let you do the same things you could already do with classes but with function-based components. That’s probably why people love them so much.

That's the end of this guide and if you have any questions, let me know on any of my social media handles.

Originally published at https://jaycoding.tech.