DEV Community

loading...
Cover image for React Hooks For Beginners

React Hooks For Beginners

Travis Ramos
Code + Coffee = ❤️
Originally published at travislramos.com Updated on ・4 min read

What are Hooks in React?

React introduced Hooks in its 16.8 release, and with it came the ability to use more of React's features without having to use classes.

This is not saying that classes are no longer used, or that they are becoming deprecated(at least not yet) so there is no need to rush in updating all of your classes into functions.

Hooks were designed with this in mind and work side-by-side with existing code which allows for a gradual adoption process...no rush.

How Do They Work?

Typically when dealing with State in a React class you would have something like this:

This example renders a button that when clicked increments the value of 'jumps' by one.

import React from 'react';

    class JumpMan extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            jumps: 0,
        };
      }
    render() {
        return (
            <div>
                <p>You jumped {this.state.jumps} times.</p>
                <button onClick={() => this.setState({jumps: this.state.jumps + 1})}>
                    Jump Again!
                </button>
            </div>
        );
    }
}
Enter fullscreen mode Exit fullscreen mode

And in order for your class to have its own state, you would need to pass it into a constructor method on the instance (this), invoke super so you can use this, and pass in 'props' as an argument to super.

Then with the release of class fields you no longer had to use a constructor to set the initial state of the component so your new class would look something like this:

import React from 'react';

class JumpMan extends React.Component {

    state = {
        jumps: 0
    }

    render() {
        const { jumps } = this.state;
        return (
            <div>
                <p>You jumped {jumps} times.</p>
                <button onClick={() => this.setState({jumps: jumps + 1})}>
                    Jump Again!
                </button>
            </div>
        );
    }
}
Enter fullscreen mode Exit fullscreen mode

Although this is cleaner, you are still having to use a class in order to have and manipulate your components state.

With Hooks this is no longer necessary. You can now turn your class into a function and use a hook called "useState" which will return a pair: the current state and a function that lets you update it! Then just pass in the initial state as an argument to useState and that's it!

You can then call this function just as you would call this.setState like I am doing here:

import React, { useState } from 'react';

function JumpMan() {

    const [jumps, setJumps ] = useState(0);
    return (
        <div>
            <p>You jumped {jumps} times.</p>
            <button onClick={() => setJumps(jumps + 1)}>
                Jump Again!
            </button>
        </div>
    );

}
Enter fullscreen mode Exit fullscreen mode

Also, you can have multiple state objects if you need to like so:

const [jumps, setJumps ] = useState(0);
const [highFive, setHighFive ] = useState(0);
const [kicks, setKicks ] = useState(0);
Enter fullscreen mode Exit fullscreen mode

Not only does this new hook clean up the code a bunch, but it also simplifies things by not having to write class components.

But Wait Theres More

The way you handle state in your components wasn't the only thing on React's radar during this time. They also wanted to change how you handle side effects such as changing the DOM from your component or data fetching.

To solve this React introduced a Hook called "useEffect".

This now gives us the ability to perform these side effects within a function component! Gone are the days of setting up a class component in order to achieve the same effects with componentDidMount, componentDidUpdate, or componentWillUnmount....welcome to cleaner React!

So how does this look?

Going back to our previous JumpMan example we will add in useEffect to set the document title after React updates the DOM!

import React, { useState, useEffect } from 'react';

function JumpMan() {

    const [jumps, setJumps ] = useState(0);

    useEffect(() => {
        document.title = `You have jumped ${jumps} times! Keep Going!`
    });

    return (
        <div>
            <p>You jumped {jumps} times.</p>
            <button onClick={() => setJumps(jumps + 1)}>
                Jump Again!
            </button>
        </div>
    );

}
Enter fullscreen mode Exit fullscreen mode

Here, useEffect runs after every render and is being used in place of componentDidMount and componentDidUpdate! One thing to keep in mind when using this Hook is that it must be declared within the component so that it will have access to its props and state.

What Are The Rules

Hooks are meant to only be called at the top level, don't try and call them inside loops or conditions because it won't work.

Also you can only call Hooks from React function components or your own custom Hook. If you try and call inside a class or regular JS function it won't work. To learn more about these rules or Hooks in general checkout React's official documentation.

I hope this has helped give you a brief introduction into the world of React Hooks!

Shameless Plug

If your bored at home and looking for some fun things to do during this lockdown, checkout my previous post! Here you'll find a bunch of free coding courses you can start right now!

Discussion (6)

Collapse
sirgee profile image
Sergey Sachkov

A little offtop. I haven't found an option to leave a comment on your blog, so I'll do it here.
About free coding during this tough time, I can add the following:

  • Udacity offers 1 month for free.
  • Codecademy can provide 3 months of their premium subscription - if you were somehow impacted by covid-19.
Collapse
travislramos profile image
Travis Ramos Author

Oh awesome glad to know! Thanks for sharing, and I hope you enjoyed the post!

Collapse
sharmakushal profile image
Kushal sharma

Nice explained buddy

Collapse
travislramos profile image
Travis Ramos Author

Thank you, I'm glad you liked it!

Collapse
profkache profile image
Salim Kachemela

Awesome and clear tutorial, easy to understand

Collapse
travislramos profile image
Travis Ramos Author

Thank you for the feedback! I'm glad you enjoyed it :)

Forem Open with the Forem app