Learn React 19: The Complete Guide to Modern Web Apps/

...

/

Custom Hooks: Reusing Logic Across Components

Custom Hooks: Reusing Logic Across Components

Explore how custom Hooks package stateful logic into reusable functions so your components stay clean and consistent.

We'll cover the following...

In growing applications, we’ll often repeat the same state and effect patterns across multiple components, such as fetching data, syncing to localStorage, toggling UI states, or debouncing inputs. Copy-pasting might seem convenient at first, but it quickly leads to duplicated logic, inconsistent fixes, and a fragile codebase that’s difficult to maintain.

Understanding custom Hooks

Custom Hooks solve this problem by allowing us to extract shared logic into reusable functions, keeping our components small, consistent, and easier to test. Custom Hooks are regular functions that use other React Hooks to encapsulate and share stateful logic across components.

A custom Hook is a function whose name starts with use (it's by convention, e.g., useToggle) that internally uses React Hooks (useState, useEffect, etc.) to implement a behavior we can reuse.

Syntax

Here is the generic structure of a custom Hook that manages internal state and exposes a simple API.

Javascript (babel-node)
import { useState } from "react";
export function useSomething(initialValue) {
  const [value, setValue] = useState(initialValue);
  function updateValue(newValue) {
    setValue(newValue);
  }
  return { value, updateValue };
}

  • Line 3: Custom Hooks follow the use naming convention and can accept parameters like initial values or configurations.

  • Line 4: Hooks usually rely on React’s built-in Hooks (useState, useEffect, etc.) internally.

  • Lines 6–8: Internal helper functions handle updates or logic related to the Hook’s purpose.

  • Line 10: The Hook returns an object or tuple containing the data and functions that the consuming component can use. ...