Custom Hooks

Introduction

As applications grow, you often find the same piece of stateful logic — tracking window size, syncing a value to localStorage, subscribing to an event, managing a form field — copied and pasted across several components. Copy-pasted logic is hard to maintain: fix a bug in one copy, and the others quietly stay broken.

Custom Hooks solve this by letting you extract that logic into its own reusable function, built out of React's built-in Hooks. This lesson shows why custom Hooks exist, the rules for building one, and walks through two practical examples: useWindowWidth and useLocalStorage.

Why Custom Hooks Exist

Before Hooks, sharing stateful logic between components required patterns like Higher-Order Components or render props, both of which add extra layers of nesting and indirection. Custom Hooks let you extract stateful logic into a plain JavaScript function that any component can call directly, with no extra wrapping components involved.

The Naming Convention

Every custom Hook must start with the word "use" — for example useWindowWidth, useLocalStorage, or useFetch. This is not just a style preference: React's own linter rules (like the Hooks ESLint plugin) use this naming convention to know which functions are Hooks, so they can correctly enforce the Rules of Hooks, such as not calling Hooks conditionally.

Building useWindowWidth

Let's build a custom Hook that tracks the browser window's width and updates whenever the window is resized. Internally, it simply combines useState and useEffect — the same Hooks you already know — packaged into one reusable function.

import { useState, useEffect } from "react";

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth);
    }

    window.addEventListener("resize", handleResize);

    // Cleanup: remove the listener when the component unmounts
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return width;
}

export default useWindowWidth;

Notice this looks exactly like logic you might write directly inside a component — the only difference is it lives in its own function named with the "use" prefix, so it can be reused anywhere.

Using the Hook in Multiple Components

Once defined, useWindowWidth can be called from any number of components, and each one gets its own independent, live-updating width value.

import useWindowWidth from "./useWindowWidth";

function Header() {
  const width = useWindowWidth();
  return <header>Window width: {width}px</header>;
}

import useWindowWidth from "./useWindowWidth";

function Sidebar() {
  const width = useWindowWidth();
  return (
    <aside>
      {width < 768 ? "Mobile layout" : "Desktop layout"}
    </aside>
  );
}

Both Header and Sidebar independently track window width.
Resizing the browser updates both components automatically,
even though neither one duplicates the resize-listener logic.

Building useLocalStorage

Custom Hooks can call other Hooks internally, and even other custom Hooks. Here is a second example: useLocalStorage, which behaves like useState but automatically persists its value to the browser's localStorage.

import { useState, useEffect } from "react";

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored !== null ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

export default useLocalStorage;

import useLocalStorage from "./useLocalStorage";

function NotesApp() {
  const [note, setNote] = useLocalStorage("my-note", "");

  return (
    <textarea
      value={note}
      onChange={(e) => setNote(e.target.value)}
      placeholder="Type a note — it will be saved automatically"
    />
  );
}

Typing into the textarea saves the note to localStorage.
Refreshing the page restores the last saved note automatically,
because useLocalStorage reads it back on initial render.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Custom Hooks turn repeated stateful logic into a single, reusable, well-named function, keeping components smaller and easier to maintain. Because a custom Hook is just a regular function built from other Hooks, there is no new concept to learn — only a naming convention and the same Rules of Hooks you already follow.

In this lesson, you learned why custom Hooks exist, the "use" naming rule, and built two working examples reused across multiple components. Next, you will step back and look at the full component lifecycle — mounting, updating, and unmounting — and how Hooks map onto each phase.