Intro Into React Hooks: State Hook

Using the State Hook by Chaim Shcherbina

Photo by Aral Tasher on Unsplash

Today I wanted to discuss React Hooks. In particular to focus on the State Hook.

The State Hook is probably the most famous, widely used hook out there.

Before I start, I wanted to give a shout out to the Boot-Camps out there that don’t teach Hooks. It’s so important to first understand the basic way state works. Because of this, I first want to give a brief overview of regular old state.

So we are just going to write a simple React class.

Imagine some simple kids game that you click on the animal and it emits the noise it would generally admit. This game is educational so we will count the barks:

class Dog extends React.Component {
constructor(props) {
super(props);
this.state = {
barkCount: 0
};
}

render() {
return (
<div>
<p> The dog barked {this.state.count} times! </p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click to make the dog bark!
</button>
</div>
);
}
}

In the above code, we created a class called Dog and set a counter to see how many times it barks. This is the most simple use of good old state.

Now onto Hooks.

So What exactly is a Hook?

A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to function components. Simple enough.

So let’s say I wrote the above dog class, not as a class but as a functional component.

import React from 'react';

function Dog() {
//some functionality
}

Then you realized, “oh hay, I wanna put some state in here so i can count dog barks”. Previously you would have to change it from a functional component to a class component. That’s no fun.

Introducing React Hook — Set State!

import React, { useState } from 'react';

function Dog() {
// Declare a new state variable, which we'll call "barkCount"
const [barkCount, setBarkCount] = useState(0);
}

We declared a “state variable”. This is a way to “preserve” some values between the function calls — useState is a new way to use the exact same capabilities that this.state provides in a class.

The only argument to the useState() Hook is the initial state (which in our case is 0). Unlike with classes, the state doesn’t have to be an object. We can keep a number or a string if that’s all we need.

We wrote const [barkCount, setBarkCount] = useState() because it returns a pair of values: the current state and a function that updates it. This is similar to this.state.count and this.setState in a class, except you get them in a pair. So if we wanted to update the current barkCount, we can call setBarkCount.

To Update State we just need to write:

<button onClick={() => setBarkCount(barkCount + 1)}>    Click me
</button>

Notice we no longer need to use `this.state.barkCount`.

Before I say goodbye, just one important thing to note: Unlike this.setState in a class, updating a state variable always it instead of merging it.

Hope you enjoyed! See you next time!!

[Insert exit tune of your choice here mentally :-) ].

Passionate Programmer. Independent Thinker. Caring Father. Graduate of Flatiron Bootcamp for Software Development. Currently seeking new opportunities.