React Hooks Intro

This week I attended ReactNYC for the first time, where I was exposed to new and interesting concepts and technologies. The topics that were covered by the speakers were Firebase, how to stage a Javascript revolution at your company, accessibility and hooks, and d3. I learned a lot about these topics from the speakers and most importantly, got to see live coding examples. It was also neat to see Buzzfeed’s NYC office.

ReactNYC S3:E4

The big takeaway that I got from this React meetup was that React Hooks are the hot new thing that all the developers are talking about. A lot of devs hated it at first, but now it is catching on. This blogpost will explain what React Hooks are, why they are useful, and a simple example.

The simplest way to describe Hooks is that they allow you to use state with functional components. Prior to Hooks, you had to use Class components when you needed to use state. The benefit of using Hooks with functional components is that you can extract and reuse stateful logic. Hooks simplify lifecycle methods, like componentDidMount and componentWillUnmount, into one method called useEffect. Using functional components also allows you to avoid the tricky “this” keyword.

Hooks and Class components will both be supported for the foreseeable future in React. The best way to start using Hooks is to add it to a simple component, so that is exactly what I did. I added Hooks to the portfolio page that I am currently working on. The Home component is using state to display my resume on a button click.

Class component version:

import React from "react";
class Home extends React.Component {
state = {
    resumeClicked: false
}
showResume = () => {
    this.setState({resumeClicked: !this.state.resumeClicked})
}
renderResume = () => {
  if (this.state.resumeClicked === true) {
    return (
      <div>
       <iframe src="https://docs.google.com/document/d/e/2PACX-1vQcO74u2RzZE1gKuygyq_3yM-Kk1AvyJwHgeEdjcLKchjt0Af2WGHgr7jGUXG86lksaw3ngrgnc3VTc/pub?embedded=true" width='500px' height='623px'></iframe>
        </div>
    )
  } else {
    return null
  }
 }
render() {
    return (
      <div>
        <button onClick={this.showResume}>
          Show Resume
        </button>
        {this.renderResume()}
      </div>
    )
  }
}
export default Home

Hook version:

import React, { useState } from 'react';
const Home = () => {
const [resumeClicked, showResume] = useState(false)
const renderResume = () => {
    if (resumeClicked === true) {
      return (
        <div>
          <iframe src="https://docs.google.com/document/d/e/2PACX-1vQcO74u2RzZE1gKuygyq_3yM-Kk1AvyJwHgeEdjcLKchjt0Af2WGHgr7jGUXG86lksaw3ngrgnc3VTc/pub?embedded=true" width='600px' height='400px'></iframe>
        </div>
      )
    } else {
      return null
    }
  }
return (
  <div className="">
    <button onClick={() => showResume(!resumeClicked)}>
      Show Resume
    </button>
    {renderResume()}
  </div>
  )
}
export default Home

Now to break it down:

const [resumeClicked, showResume] = useState(false)

This line of code is equivalent to this in a Class component:

state = {
    resumeClicked: false
}

Setting state is a little different than how it is in a Class. You can name the method to set state to whatever you want instead of simply “this.setState()”.

These are equivalent:

const [resumeClicked, showResume] = useState(false)
showResume(!resumeClicked)
--------------------------------------------------------------------
this.setState({resumeClicked: !this.state.resumeClicked})

Overall, this wasn’t too difficult to implement and I plan on using it in the future. I hope that this brief introduction to Hooks will get you hooked(yes) on using Hooks in your projects!

Sources:

Introducing Hooks - React

Hooks at a Glance - React