Intro to React Hooks
Tags: react, javascript, beginners
Published: 2019-10-14 03:21:43

Most web developers would probably agree that the the **React Javascript Library** is pretty simple to implement.  Just imagine the component you want, whip up some JSX, render and BOOM!  You've got an app!  Prior to this year, however, it was necessary for you to decide *what type* of component you wanted to build before you started coding.  If you wanted to make a component to simply display data, like a card or list item, you would make a **functional component**.  If you wanted to make a smart, reactive component that listens to client input and keeps track of certain properties (**State**), you make a stateful **class component**.  With the release of React 16.8 (Feb 2019), you can now stick with just functional components with React **hooks**.  Hooks allow us to give functional components **state** without having to create class components.  *This blog will compare a class component and hooked functional component that both create the same component*. Before we see hooks in action, let's take a look at an example of each:

####functional component
```jsx
const listItem = props => <li>Print my {props.name}</li>;
```
this component takes ``props`` as an argument and returns an ``<li>`` tag that displays the name property on props.  Nice and simple.
####class component with state
```jsx
class BankAccount extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      balance: 10
    };
  }
  render() {
    return <h3>Your Balance is: ${this.state.balance} </h3>;
  }
}
```
Right a way, we see that class components require quite a bit more than their functional counterparts.  We must use the ES6 ``class`` keyword and extend from ``React.Component`` and call ``super(props)`` in our constructor in order to access some special methods we will need later on in order to make our component keep track of state.  We must also explicitly define a render method, which will actually create our component when a new instance is instantiated.  Notice from our functional component example, **no render is required**.  React takes care of the rendering behind the scene, saving us code.

This component represents a bank account with a balance that is stored with a ``state`` object.  If we wanted to add money to our balance, we could create an instance method to update the ``state`` using the built in method ``setState`` method that comes out of the box with class components in react.  Below is the updated bank account with a ``deposit`` method:
```jsx
class BankAccount extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      balance: 10
    };

    this.deposit = amount => {
      this.setState({
        balance: this.state.balance + amount
      });
    };
  }
  render() {
    return <h3>Your Balance is: ${this.state.balance} </h3>;
  }
}
```
Calling ``deposit(100)`` updates the ``balance`` property and the render method is automatically called thus an updated balance of $110 would be added to the DOM.  Cool stuff right?  Well we can accomplish the same thing in less code by using a **functional component with a hook**.  Check out our updated ``BankAccount`` below:
```jsx
import { useState } from 'react';

const BankAccount = () => {
  let [balance, setBalance] = useState(10);
  const deposit = (amount) => {
    setBalance(balance + amount);
  }
  return <h3>Your Balance is: ${balance} </h3>;
}
```
While we do need to import a ``useState`` method from react, our code is significantly reduced.  ``useState`` creates an array with two elements: the first we assign to ``balance``.  This is the exact same as ``this.state.balance`` from the class example.  The second element we assign to ``setBalance``.  This acts in the same way as ``setState`` from our class example.  Nice that we can name our setter something that actually fits!  We are also saved from writing a ``render`` method as react takes care of it for us.  Nice!  We have successfully **hooked** our functional component.

![fishing gif](https://media.giphy.com/media/Gz285nA3Kq5YQ/giphy.gif)

With our refactoring of the ``BankAccount`` component, we have just begun to scratch the surface of what hooks can do for us.  We can also:
  * Write lifecycle methods in functional components using ``useEffect``
  * Create multiple states within a single function
  * Avoid the confusing ``this`` keyword
  * Share non-visual logic

When learning react, a developer can focus on just one component syntax to create dynamic and complex components with less code.  Impressive for a library that is already one of the most popular around.