Start Using the State Hook
Tags: javascript, react, beginners, reacthooks
Published: 2019-10-06 17:11:18

---
title: Start Using the State Hook
published: true
description: A step by step guide of how to start using the State Hook
tags: javascript, react, beginners, reacthooks
cover_image: https://thepracticaldev.s3.amazonaws.com/i/wdoeqrpf80da79gkdmdb.png
---

## 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:

```javascript
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

```javascript
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:

```javascript
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.