React Hooks Tutorial for Beginners: Getting Started With React Hooks

In this React hooks tutorial you will learn how to use React hooks, what they are, and why we’re doing it!
Originally published on valentinog.com/blog
Here I am, writing a React hooks tutorial for you. I decided to wait until hooks got finally released before dropping this post. Together we’ll learn React hooks step by step, with a look at how the same logic would be implemented with ES6 classes.
Enjoy the reading!

React Hooks Tutorial for Beginners: what you will learn

In the following tutorial you’ll learn:

how to use React hooks
how the same logic would be implemented in React class components

React Hooks Tutorial for Beginners: requirements

To follow along with the tutorial you should have a basic understanding of:

ES6 (arrow functions, destructuring, classes)
React

React Hooks Tutorial for Beginners: setting up the project

If you want to follow along with the examples make sure to configure a React development environment. Run:
npx create-react-app exploring-hooks

and you’re good to go!
(You should have one of the latest version of Node.js for running npx).

React Hooks Tutorial for Beginners: in the beginning there was setState

I won’t go too deep here, I assume you’re already using React in your project but let me do a quick recap.
React is a library for building user interfaces and one of its perks is that the library itself imposes a strict data flow to the developer. Do you remember jQuery? With jQuery it’s almost impossible to clearly structure a project, let alone defining how the data should flow across the UI. It’s hard to keep track of what function is changing what piece of UI.
The same applies to plain JavaScript: even if with self-disclipine and practice it’s possibile to come up with a well structured project (thinking about the module pattern), good luck tracking state and interactions between functions (it can be done but it’s hard without external help, see Redux).
These problems has been somewhat eased by React: by enforcing a clear structure (container and functional components) and a strict data flow (components react to state and props change) now its easier than before to create well reasoned UI logic.
So the theory in React is that a piece of UI can “react" in response to a state change. The basic form for expressing this flow was an ES6 class up until now. Consider the following example, an ES6 class extending from React.Component, with an internal state:
import React, { Component } from "react";

export default class Button extends Component {
constructor() {
super();
this.state = { buttonText: "Click me, please" };
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState(() => {
return { buttonText: "Thanks, been clicked!" };
});
}

render() {
const { buttonText } = this.state;
return