Hooks in React — The Basics

Photo by Tatiana Rodriguez on Unsplash

Are you tired of having to use class components and pass props along for all your state management in React? Looking to optimize your workflows by using more functional components and less class components? Hooks are a tool that could be very helpful for you!

In the past, we relied on class components to do things like manage state and use lifecycle methods. Now, using hooks, we can do this from inside of functional components, simplifying and speeding up our apps. The two major applications of hooks come through useState and useEffect.

Let’s walk through setting up a simple application of hooks. We’ll compare it to the equivalent in class components. For this post, we’ll stick with the first major application of hooks for state management, useState.

First we’ll need to import useState from the react library:

import React, { useState } from ‘react’;

Declaring state:

Below, you can see that useState’s argument is the initial state value, which is set to 0 in this example. This could also be a string or object — anything you want to hold in state. Here, useState returns a pair of values, chokes and setChokes. Chokes is the key in state, and setChokes is what we will use to update this piece of state later, similar to setState() in a class component.

// Declaring useState in a functional component:const [chokes, setChokes] = useState(0);// Declaring state in a class component:state = {
chokes : 0
}

Calling state:

In a class component, we need to use {this.state.chokes} to call the value of that key in state, but because we used useState in a functional component to declare state, we can simply call {chokes} anywhere we’d like to render the current value of chokes in state. No more need for this.state!

// Calling state using hooks in a functional component:<p>I got {chokes} chokes tonight in class!</p>// Calling state in a class component:<p>I got tapped with {this.state.chokes} chokes tonight :(</p>

Updating state:

// Using hooks in a functional component to update how many taps we get with our chokes:<button onClick={() => {setChokes( chokes + 1 )}>
Land a choke!
</button>
// Using a class component to get caught with Ezekiels, Guillotines, and Bow and Arrow chokes:<button onClick={() => this.setState({ chokes: this.state.chokes + 1 })}>
Tap to a choke...
</button>

Using multiple state values:

// Using hooks:const [chokes, setChokes] = useState(0);
const [setups, setSetups] = useState('leg drag');
const [partners, setPartners] = useState([{ name: 'Harris' } , { name: 'Ashton' }]);
// Using a class component:state : {
chokes : 0,
setups : 'leg drag',
partners : [
{
name : 'Harris'
} , {
name : 'Ashton'
}
]
}

That’s it! Now you’ve seen and tried they very basic application of hooks in a functional component. The beauty of using hooks is that is allows you to store and manipulate state locally without having to pass down pieces of state as props to child components. Additionally, it does away with the need for having class components, which makes your app run more efficiently!

Next, we’ll take a look at another common use for hooks: useEffect. This allows us to “hook” in to events like componentDidMount.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Justin Langlinais

Justin Langlinais

Software Engineer and Brazilian Jiu-Jitsu brown belt