Start Using the State Hook

Introduction

React Hooks has been out for a while now, but if you're a late adopter trying to use it on your projects I'm here to quickly break it down for you. It can seem like a lot to learn if you never used it before, but it’s actually super simple when you get your head around what each part means. Let’s start by understanding one of its pieces: the State Hook.

Class Component Way

Let’s look at this example using a Class Component:

class Search extends Component {
  state = {
    text: '',
  }

  handleChange = e => {
    this.setState({ text: e.target.value });
  }

  render() {
    return (
      <>
        <input 
          value={this.state.text}
          onChange={this.handleChange}
        />
      </Fragme>
    );
  }
}

A simple controlled input field that you probably saw 1000 times before. It uses state to control the input value, so before Hooks it had to be a class component. Let’s refactor it into a functional component using the State Hook and see what it looks like.

State Hook Way

const Search = () => {
  const [text, setText] = useState('');

  const handleChange = e => {
    setText(e.target.value);
  }

  return (
    <Fragment>
      <input 
        value={text}
        onChange={handleChange}
      />
    </Fragment>
  );
}

It looks much cleaner now, doesn’t it? But how does it work?

Breaking it Down

First of all, you need to import useState from React if you want to, well, use state.

import React, { useState } from ‘react’;

The next line is the most weird looking one if you never used Hooks before so let’s break it down even more:

const [text, setText] = useState('');

Here you are defining a state called text together with a function called setText that will change the text state. When defining state with Hooks there’s always a pair. For example, if you wanted a state called isLoading, you would need a setIsLoading function to go with it.

It’s important to note that naming the function setSomething is just convention, so you can name it whatever you want.

On that same line we also see useState(''). useState is what turns those variables we just declared as state, and the empty quotes inside the brackets is the initial value, which in this case is an empty string.

If we had const [isLoading, setIsLoading] = useState(false) that would mean that the initial state of isLoading is false.

Final step is to then change the state. Instead of using this.SetState({ state: value}) like we did before, all we need to do is call our setText function and pass the new value directly on our handleChange method:

handleChange = event => {
  setText(event.target.value);
}

You will see that now we have exactly the same functionality as before, but our code is much cleaner!

What's Next?

Give it a try, look for old stateful class components you worked in the past and try to refactor them into functional components with the State Hook, you’ll get used to it pretty quickly!

But what if your class component uses lifecycle methods, how can you refactor them into functional components? That's what I'm going to talk about next time!

Keep on practicing, keep on coding.