Getting Started with React Hooks

Published on July 24, 2021

Introduction

In this post, we will explore React Hooks and how they can be used to manage state and side effects in React components. We will start with the basics and then move on to more advanced topics…

What are React Hooks?

React Hooks are a powerful way to manage state and side effects in React components. With Hooks, you can extract logic from components and reuse it across your application.

Example of using useState()

Let’s say we have a simple counter component that displays the current count:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In this example, we use the useState Hook to manage the state of the counter. The useState Hook takes an initial value as an argument and returns an array with two elements: the current state, and a function to update it. In this case, the initial value is 0, so the useState Hook returns an array with [0, setCount].

Example of using useEffect()

Now let’s say we want to fetch data from an API when the component mounts:

import React, { useEffect } from 'react';

function FetchData() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      <p>Data: {data}</p>
    </div>
  );
}

In this example, we use the useEffect Hook to fetch data from an API when the component mounts. The useEffect Hook takes a function as its first argument and an array of dependencies as its second argument. In this case, the function fetches data from the API and updates the state with the response. The dependencies array is empty, so the effect only runs once when the component mounts.

Example of using useContext()

Another way to manage global state in React is by using the useContext Hook:

import React, { useContext } from 'react';

const UserContext = React.createContext();

function App() {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <div>
        <p>Hello, {user && user.name}!</p>
        <LoginButton />
      </div>
    </UserContext.Provider>
  );
}

In this example, we use the useContext Hook to create a context object that provides the current user and a function to update it. We then pass this context object as a prop to the LoginButton component:

import React from 'react';

function LoginButton() {
  const { user, setUser } = useContext(UserContext);

  return (
    <button onClick={() => setUser({ name: 'John Doe' })}>Log in</button>
  );
}

In this way, the LoginButton component can update the state of the user without having to pass props all the way up through the tree.

Conclusion

React Hooks are a powerful way to manage state and side effects in React components. With Hooks, you can extract logic from components and reuse it across your application. By using the useState, useEffect, and useContext Hooks, you can create complex and dynamic user interfaces with ease.