React Custom Hooks

In React, Hooks allow you to use state and lifecycle features in functional components. Sometimes, multiple components need the same logic, such as fetching data, managing forms, or handling animations.

Instead of repeating code, Custom Hooks allow you to extract reusable logic into a separate function.

What Are Custom Hooks?

A Custom Hook is a JavaScript function whose name starts with use and can call other hooks inside it.

They let you share logic across multiple components.
They do not render anything themselves, they just return state, functions, or values.
They follow the same rules as built-in hooks (e.g., only call hooks at the top level).

Syntax:

function useCustomHook() {
  // Use other hooks like useState, useEffect
  const [state, setState] = useState(initialValue);

  // Return values/functions
  return { state, setState };
}

Why Use Custom Hooks?

Avoid code duplication across components
Encapsulate complex logic in one place
Make your components clean and readable
Maintain consistent state management

Example – Custom Hook for Fetching Data

Suppose multiple components need to fetch data from an API. Instead of repeating useState and useEffect, we can create a useFetch hook.

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Using the Custom Hook in a Component

import React from "react";
import useFetch from "./useFetch";

function Users() {
  const { data, loading, error } = useFetch("<https://jsonplaceholder.typicode.com/users>");

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default Users;

useFetch handles all fetching logic.
The Users component only consumes the returned values.
This reduces duplication and makes your code cleaner and reusable.

Other Examples of Custom Hooks

useLocalStorage → Sync state with localStorage
useForm → Handle form state and validation
useWindowSize → Track window dimensions
usePrevious → Store previous state or props

React Handbook