Simplify with useState React Hook
Tags: react, webdev, codenewbie
Published: 2020-10-12 04:01:09

I've only just begun to learn React Hooks, and I am already excited about how this will transform my code to become cleaner and less bulky!

##What are React Hooks?

Hooks are available as of React 16.8.  It gives us the ability to build a React application using only functional components, wherein we can now use state without having to rely on a class component, and we can *hook* into React features.

This is pretty awesome, because it eliminates the need to worry about having to convert a functional component into a class component if you end up needing to use state in it. 

React comes with several built-in Hooks, but you could also build our own.  In this blog, I'm going to show you how I was able to utilize one of the built-in Hooks - `useState`. 

##useState

When creating a form, generally it starts out looking like this class component: 

```javascript
import React, { Component } from 'react';

class Form extends Component {
  state = {
    input: ''
  }

  handleOnChange = (event) => {
    this.setState({
      input: event.target.value
    })
  }

  render() {
    return (
      <div>
        <form>
          <label>
            Input Field: 
            <input type='text' input='input' />
          </label>
          <button type='submit'>Submit</button>
        </form>
      </div>
    )
  }
}
```

All we're doing here is updating the component's state as the value of the input field changes.  The exact same thing can be accomplished by converting this to a functional component and implementing the use of `useState`:

```javascript
// First, let's change the import:
import React, { useState } from 'react';

// Convert the class component into a functional component:
const Form = () => {
  // Here we will change the way we access state:
  const [input, setInput] = useState('');

  // We can remove render() as this is a functional component that just needs to return JSX:
  return (
    <div>
      <form>
        <label>
          Input Field: 
          <input
            // Instead of declaring a separate function for updating the state, we can simply do that here:
            onChange={event => setInput(event.target.value)}
            type='text' 
            input='input' />
        </label>
        <button type='submit'>Submit</button>
      </form>
    </div>
  );
}
```

So to explain what we've done here, we first needed to import the `useState` package so that we can use it in our code.  You will also note that we are no longer importing `Component`. 

Next we converted the class component into a functional component.  Remember that we will no longer have access to the keyword `this`, so any instances of that will need to be removed. 

Now, when it comes to actually using `useState`, here is the syntax:

```javascript
const [input, setInput] = useState('');
```

`useState` returns two values: 1) the current state and 2) the function that updates it (these variables can be named anything).  When we call `useState()`, we pass in the initial state as an argument, which is why in this case it is an empty string.

Moving on, the next change was to remove `render()`.  We have a functional component now, and all it does is return JSX. 

Finally, inside the form we are calling the `setInput` function at the `onChange` event so that we can update the value of state.  We could have kept the `handleOnChange` function and called `setInput` in there, but there wasn't a whole lot going on in there so I just went ahead and removed it. 

And that's it!  'Works the same and it requires fewer lines of code.

[Here is the awesome documentation for React Hooks!](https://reactjs.org/docs/hooks-intro.html)