Getting Started with React Hooks

1. Introduction

1.1 Goal of the Tutorial

This tutorial aims to introduce you to React Hooks, a feature that allows you to use state and other React features without writing a class.

1.2 Learning Outcomes

By the end of this tutorial, you will understand what React Hooks are, how to use them in functional components, and their benefits over class components.

1.3 Prerequisites

• Basic understanding of JavaScript and React
• Node.js and npm installed on your computer

2. Step-by-Step Guide

2.1 What are React Hooks?

React Hooks are functions that let you 'hook into' React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

2.2 Why Hooks?

Hooks allow you to reuse stateful logic without changing your component hierarchy. You can share and reuse components without having to wrap them in higher-order components.

2.3 Using Hooks in Functional Components

To use a Hook, we start by importing the hook. We then call the Hook at the top level of our functional component. Here's an example of using the useState Hook:

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

3. Code Examples

Example 1: Using the useState Hook

import React, { useState } from 'react';

function Example1() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  // This is the render method
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

In the example above, useState is a Hook (we’ll talk about what this means in a moment). We call it inside a function component to add some local state to it. React will preserve this state between re-renders. useState returns a pair: the current state value and a function that lets you update it. You can call this function from an event handler or somewhere else.

Example 2: Using the useEffect Hook

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

function Example2() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

In this example, the useEffect Hook tells React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates.

4. Summary

You've now been introduced to React Hooks, specifically the useState and useEffect Hooks. You've learned that Hooks allow you to use state and other React features without writing a class.

For further learning, you can explore other Hooks like useContext, useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, and useDebugValue.

5. Practice Exercises

Exercise 1: Create a Counter with useState

Create a counter that increments and decrements when two different buttons are clicked.

Exercise 2: Use useEffect to Fetch Data

Fetch data from an API and display it in your component using the useEffect Hook.

Exercise 3: Combine useState and useEffect

Create a counter that, when incremented or decremented, updates the document title with the current count using both useState and useEffect.