React useState State Hook

Introduction

One of the biggest perks about React is the ability to maintain state both in a component and at the top level of your application if you include a state=management package such as Redux. Today, I want to talk about the React State Hook and how it has changed the way we manage state and, most importantly, cleaned up the code involved!

At A Glance

Looking towards the docs for useState(), we catch a glimpse of how we go about using it:

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

I'm going to explain what's happening, but let's visit the old way doing things below:

import React, { Component } from 'react';

export default class Example extends Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
    }

    handleClick = () => {
        this.setState({ count: count + 1})
    }

    render() {
        return (
            <div>
                <p>You clicked {this.state.count} times</p>
                <button onClick={this.handleClick}>
                    Click me
                </button>
            </div>
       );
    }
}

Geeze, that's a lot of population in our code for something so simple. Enter useState...

How useState Is Applied

If we pay attention to this line: const [count, setCount] = useState(0);, you'll see a deconstructed method for handling the state of count. The setCount method acts as a function that compares to triggering this.setState({}) in the older way of handling state changes.

This can be seen where it is applied in the code snippet above for our button:

<button onClick={() => setCount(count + 1)}>
    Click me
</button>

setCount is handling all of our logic which would normally be way more drawn out. Thanks to our React State Hook, our code is way more clean and readable.

Conclusion

React Hooks are incredible useful and time saving. There are more of them out there, and they all solve a problem that we developers would otherwise run into at some point or another. If you're new to React, this is going to change the game for you! Please enjoy, and as always, leave a comment if you have any questions!

Happy Sunday!