Introduction to React Hooks

Hello there friends and fellow coders! I am here today to talk to you about React hooks. I am no expert on the subject, so please bear with me here. Anywho if have not heard much about hooks, here's the rundown. Hooks allow you to heavily reduce the need for class-based components. If you are here, you probably are at least somewhat familiar with the basics of React and know that a normal class-based component may look something like this.

import React from 'react'

class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
    this.increment = this.increment.bind(this)
  }

  handleIncrement() {
    this.setState({
      count: this.state.count += 1
    })
  }

  render() {
    return (
      <div>
        <div>{this.state.count}</div>
        <button onClick={this.increment}>Click me!</button>
      </div>
    )
  }
}

Now in the above code snippet we have a fairly simple class-based/stateful component. First we set the state to start our counter at 0. Then We bound the increment function to the current this at call time, which is supposed to increase our count every time it is called. Then we render the current state and linked the function to a button. While this stateful component is fairly simple as is, using hooks can make this look much simpler.

The first thing that we should do to use any React hooks is to import the hook that we want to use so that we can access the hook when we need to. The hook used for setting state is called intuitively called 'useState', and we can import it on the same line that we imported react.

Import React, { useState } from 'react';

Now once we import the hook we can use it as we need to in our component. This hook in many cases will make it much easier to set state. We can use this hook by declaring a destructured array variable with 2 values. The first value would be the name that we want to call our current state. The second value would be the name that we would want to call a function that we will use to set the state. Then we want to call our hook with whatever default value that we would want our state to start with. It would look a little something like this.

const [count, setCount] = useState(0);

Hooks like this allow us to use to easily access and change state as we need to.

import React, { useState } from 'react'

function counter() {
  const [count, setcount] = useState(0)
  function handleIncrement() {
    setcount(count + 1)
  }

  return (
    <div>
      <div>{count}</div>
      <button onClick={handleIncrement}>+</button>
    </div>
  )
}

This code snippet does exactly the same thing that the code in our class-based component does. The difference here is that this code is noticeably much shorter than the first. We no longer have to use the 'this' keyword. We no longer have to wrap everything in a constructor or super function. Hooks are great for not only setting state, but also for manipulating state.

And with that. You have one of the basic hooks. If you would like to learn more about hooks you can go straight to the docs here!

I hope you enjoyed this short read and have at least a little better understanding of React hooks. Happy coding hackers!