Intro To React Hooks 🎣

In this article we will be taking a closer look at React hooks, what they are and how to use them.

Photo by Lynda Hinton on Unsplash

In React we use class components to set, track and update state.

This was until React Hooks was introduced in February 16, 2019 making class components pretty much obsolete.

Since then we have seen a great transition from using class components to using Hooks in the software engineering community.

So the main purpose in using React hooks is to gain class behavior in functional components.

But which type of components are ideal for working with hooks? To answer this question, let’s look at the functionality that we get from using a class component:

In the example below we have a simple class component and we are using setState to set our ‘plants’ array in the components state.

import React from 'react'
class PlantShowPage extends React.Component {
  state = {
    showImage: false,  
    plant: null
 }
componentDidMount() {
  this.setState({plant: this.props.plant})
}
componentDidUpdate(prevProps) {
  if (prevProps !== this.props && !this.props.plant){
    this.getPlant()
  } 
}

Here we are using the lifecycle methods state and setState which we will be replacing with hooks useState() syntax.

We are also using componentDidMount() and componentDidUpdate() which is equivalent to hooks useEffect().

Let’s convert this class component into a functional component using Hooks!

And the first thing we will use is useState()

import React, { useState, useEffect } from 'react';
const PlantShowPage = props => {
  let [showImage, setShowImage] = useState(false); 
  let [plant, setPlant] = useState(null);
}

useState returns an array you can de-structure, at index zero we have a getter method (showImage), and at index one we have a setter method (setShowImage).

This effectively replaces state in our class component:

//[this.state.showImage, this.setState({ showImage: bool })]  
//[this.state.plant, this.setState({ plant: null })]

Now we can simply use the variables ‘showImage’ and ‘Plant’ which at this point will return ‘false’ and ‘null’ respectively.

We can also use our setter methods as callbacks:

onClick={() => setShowImage(!showImage)}

And that is basically how we use state in a functional component using hooks.

Next we have componentDidMount which is being replaced by hooks useEffect().

useEffect() takes two parameters; a callback that will run whenever the component mounts or updates, and a dependency array.

useEffect(() => { 
   getPlant().then(plant => {  
     setPlant(plant)
   }
}, []) // <-- dependency array

This array holds what useEffect should be dependent on. Without it the useEffect call back will run indefinitely.

Here we are using an empty array because we want the call back to run only the very first time the component mounts.

That’s pretty much the basics for using hooks, check out:

Introducing Hooks - React

for more if you are interested in implementing hooks into your applications!

Thank you for reading! remember to follow so you don’t miss similar future content.