Intro to React Hooks

#react #javascript #beginners

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

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

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:

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:

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.

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.