🪝 Custom Hooks Development

A Quick Hooks Refresher

Hooks are functions that let you "hook into" React state and lifecycle features from function components. Introduced in React 16.8, they replaced class components as the standard way to manage state and side effects. You've already met the built-in ones:

🧰 A useful analogy: Built-in hooks are the standard tools that come with your toolbox. Custom hooks are the specialized jigs you build yourself for a task you keep repeating — a screwdriver bit ground to exactly the screw you meet every day.

What Are Custom Hooks?

A custom hook is simply a JavaScript function whose name starts with use and that calls one or more other hooks. That's the whole definition. It lets you lift stateful logic out of a component and into a reusable, shareable function.

Why bother?

• Reusability — write the logic once, use it in many components.
• Cleaner components — the component reads like a description of the UI, not a tangle of effects.
• Composition — small hooks combine into more capable ones.
• Testability — logic can be tested without rendering a whole component.
• Encapsulation — implementation details stay hidden behind a tidy return value.

The Rules of Hooks

Hooks work because React tracks them by call order on every render. Break that order and React loses track of which state belongs to which hook. Two rules keep the order stable:

A third convention makes both rules enforceable: custom hook names must start with use. That prefix is how React's linter (eslint-plugin-react-hooks) knows to check the rules inside your function.

// ❌ WRONG — hook called conditionally; order changes between renders
function Profile({ userId }) {
  if (userId) {
    const [name, setName] = useState('');  // sometimes runs, sometimes not
  }
  // ...
}

// ✅ RIGHT — hook always runs; put the condition inside
function Profile({ userId }) {
  const [name, setName] = useState('');
  useEffect(() => {
    if (!userId) return;
    // ... fetch this user
  }, [userId]);
}

Your First Hook: useToggle

The best way to learn is to build the smallest useful hook. Toggling a boolean — for modals, dropdowns, "show more" — is everywhere. Extract it once:

// useToggle.js
import { useCallback, useState } from 'react';

export function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = useCallback(() => setOn(prev => !prev), []);
  const setTrue = useCallback(() => setOn(true), []);
  const setFalse = useCallback(() => setOn(false), []);
  return { on, toggle, setTrue, setFalse };
}

// Usage
import { useToggle } from './useToggle';

function FaqItem({ question, answer }) {
  const { on, toggle } = useToggle();
  return (
    <div>
      <button onClick={toggle} aria-expanded={on}>{question}</button>
      {on && <p>{answer}</p>}
    </div>
  );
}

Tiny, but it demonstrates the whole shape of a custom hook: call built-in hooks inside, return a clean interface, and use it like any built-in. Wrapping the handlers in useCallback keeps their identity stable across renders — handy when you pass them to memoized children (next lesson's topic).

A Practical Hook: useLocalStorage

Here's a hook that feels exactly like useState but persists to localStorage, so the value survives page reloads — perfect for theme preferences, filters, or a draft form.

// useLocalStorage.js
import { useState, useEffect } from 'react';

export function useLocalStorage(key, initialValue) {
  // Lazy initializer: read storage only on first render
  const [value, setValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (err) {
      console.error(`useLocalStorage: failed to read "${key}"`, err);
      return initialValue;
    }
  });

  // Persist whenever key or value changes
  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (err) {
      console.error(`useLocalStorage: failed to write "${key}"`, err);
    }
  }, [key, value]);

  return [value, setValue];
}

// Usage — drop-in replacement for useState
function Settings() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme('light')}>Light</button>
      <button onClick={() => setTheme('dark')}>Dark</button>
    </div>
  );
}

Data Fetching: useFetch

Data fetching is the classic custom-hook use case. The naive version leaks: if the URL changes or the component unmounts mid-request, the stale response can still land and update dead state. The modern fix is AbortController, which actually cancels the network request.

// useFetch.js
import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const controller = new AbortController();

    async function run() {
      setLoading(true);
      setError(null);
      try {
        const res = await fetch(url, { ...options, signal: controller.signal });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        setData(await res.json());
      } catch (err) {
        // Ignore the error we caused by aborting
        if (err.name !== 'AbortError') setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    run();
    return () => controller.abort(); // cleanup: cancel on unmount / url change
  }, [url]);

  return { data, loading, error };
}

// Usage
function UserProfile({ userId }) {
  const { data, loading, error } = useFetch(`/api/users/${userId}`);
  if (loading) return <p>Loading…</p>;
  if (error) return <p role="alert">Error: {error}</p>;
  return (
    <div>
      <h2>{data.name}</h2>
      <p>{data.email}</p>
    </div>
  );
}

🏗️ In production: for real apps, reach for a data-fetching library like TanStack Query or SWR. They give you caching, retries, deduping, and background refetch out of the box. Hand-rolling useFetch is invaluable for understanding what those libraries do for you.

Composing Hooks

Hooks compose just like components. A hook can call other hooks — including your own — to layer behavior. Here usePaginatedFetch builds page navigation on top of useFetch:

// usePaginatedFetch.js
import { useState } from 'react';
import { useFetch } from './useFetch';

export function usePaginatedFetch(baseUrl, perPage = 10) {
  const [page, setPage] = useState(1);
  const { data, loading, error } = useFetch(
    `${baseUrl}?page=${page}&limit=${perPage}`
  );

  const nextPage = () => setPage(p => p + 1);
  const prevPage = () => setPage(p => Math.max(p - 1, 1));

  return { data, loading, error, page, nextPage, prevPage, setPage };
}

// Usage
function UserList() {
  const { data, loading, error, page, nextPage, prevPage } =
    usePaginatedFetch('/api/users', 20);

  if (loading) return <p>Loading…</p>;
  if (error) return <p role="alert">Error: {error}</p>;

  return (
    <div>
      <h2>Users — page {page}</h2>
      <ul>{data.items.map(u => <li key={u.id}>{u.name}</li>)}</ul>
      <button onClick={prevPage} disabled={page === 1}>Previous</button>
      <button onClick={nextPage} disabled={!data.hasMore}>Next</button>
    </div>
  );
}

Each layer stays small and focused. This is the same "build big things from small pieces" idea you saw with component composition — applied to logic instead of markup.

Hands-on: Build useForm

// useForm.js
import { useState } from 'react';

export function useForm(initialValues = {}, validate = () => ({})) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});
  const [isSubmitting, setSubmitting] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues(v => ({ ...v, [name]: value }));
  };

  const handleBlur = (e) => {
    const { name } = e.target;
    setTouched(t => ({ ...t, [name]: true }));
    setErrors(validate({ ...values }));
  };

  const handleSubmit = (onSubmit) => async (e) => {
    e.preventDefault();
    const validationErrors = validate(values);
    setErrors(validationErrors);
    setTouched(Object.keys(values).reduce((acc, k) => ({ ...acc, [k]: true }), {}));
    if (Object.keys(validationErrors).length === 0) {
      setSubmitting(true);
      try {
        await onSubmit(values);
      } finally {
        setSubmitting(false);
      }
    }
  };

  return { values, errors, touched, isSubmitting, handleChange, handleBlur, handleSubmit };
}

// Usage
function SignupForm() {
  const { values, errors, touched, isSubmitting, handleChange, handleBlur, handleSubmit } =
    useForm(
      { email: '', password: '' },
      (v) => {
        const e = {};
        if (!v.email) e.email = 'Email is required';
        if (!v.password) e.password = 'Password is required';
        return e;
      }
    );

  const save = async (v) => { await api.signup(v); };

  return (
    <form onSubmit={handleSubmit(save)}>
      <input name="email" value={values.email}
             onChange={handleChange} onBlur={handleBlur} />
      {touched.email && errors.email && <span>{errors.email}</span>}

      <input name="password" type="password" value={values.password}
             onChange={handleChange} onBlur={handleBlur} />
      {touched.password && errors.password && <span>{errors.password}</span>}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Signing up…' : 'Sign up'}
      </button>
    </form>
  );
}

import { renderHook, act } from '@testing-library/react';
import { useToggle } from './useToggle';

test('useToggle flips the value', () => {
  const { result } = renderHook(() => useToggle(false));
  expect(result.current.on).toBe(false);
  act(() => result.current.toggle());
  expect(result.current.on).toBe(true);
});

Best Practices & Quiz

Summary

📚 Further Reading

• React docs — Reusing logic with custom hooks
• React docs — Rules of Hooks
• useHooks.com — a library of ready-made hooks
• TanStack Query — production data fetching

🚀 What's Next?

Some of the hooks you built wrapped handlers in useCallback. Next we'll go deep on why — and on useMemo and React.memo — in Performance Optimization with Memoization.