SESSION 044 — Custom Hooks

CONCEPTS.UNLOCKED

🪝

Custom Hooks

Reusable stateful logic. useLocalStorage, useDebounce, useKeyboardShortcuts — extract patterns into functions that start with "use". Share logic, not UI.

📏

Hook Rules

Only call hooks at the top level (never in loops, conditions, or nested functions). Only call in React components or custom hooks. These rules ensure consistent hook ordering.

🔗

Composing Hooks

Custom hooks can use other hooks. useLocalStorage uses useState + useEffect internally. Hooks compose just like functions compose — build complex behavior from simple parts.

⚖

When to Extract

When you see the same useState + useEffect pattern in 3+ components, extract a hook. If it's only in 1-2 places, keep it inline. Don't over-abstract too early.

⏱

Debouncing

Wait for the user to stop before acting. Slider moves 50 times per second but the filter only applies 300ms after the last move. Reduces unnecessary work.

🧩

Abstraction Layers

Each hook hides complexity behind a simple interface. useLocalStorage handles serialization, error recovery, and sync — the consumer just uses it like useState.

HANDS-ON.TASKS

Build useLocalStorage

▶

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

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

  return [value, setValue];
}

// Usage:
const [theme, setTheme] =
  useLocalStorage('theme', 'dark');

The lazy initializer (() => ...) runs only on first render — avoids reading localStorage on every re-render. The hook returns [value, setValue] just like useState. Drop-in replacement.

Build useDebounce

▶

function useDebounce(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(
      () => setDebounced(value), delay
    );
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debounced;
}

// Usage: slider moves → debounced value
// updates 300ms after you stop

Every time value changes, the old timer is cleared (cleanup!) and a new one starts. Only when the user pauses for 300ms does the debounced value actually update — triggering the expensive filter reapplication.

Build useKeyboardShortcuts

▶

function useKeyboardShortcuts(shortcuts) {
  useEffect(() => {
    const handler = (e) => {
      for (const [combo, action]
        of Object.entries(shortcuts)) {
        if (matchesCombo(e, combo)) {
          e.preventDefault();
          action();
        }
      }
    };

    window.addEventListener('keydown', handler);
    return () => window.removeEventListener(
      'keydown', handler
    );
  }, [shortcuts]);
}

Pass an object mapping key combos to actions: { 'ctrl+z': undo, 'ctrl+y': redo, 'ctrl+s': save }. The hook manages the listener and cleanup. Used in 3 components, defined once.

Refactor PixelCraft Components

▶

Replace duplicated patterns across 5+ components:

Before	After	Saved
localStorage in 5 components	useLocalStorage	~80 lines
Debounce in 4 components	useDebounce	~60 lines
Keyboard in 3 components	useKeyboardShortcuts	~45 lines

Close the Ticket

▶

git switch -c refactor/PIXELCRAFT-032-custom-hooks
git add src/hooks/ src/components/
git commit -m "Extract useLocalStorage, useDebounce, useKeyboardShortcuts (PIXELCRAFT-032)"
git push origin refactor/PIXELCRAFT-032-custom-hooks
# PR → Review → Merge → Close ticket ✅

CS.DEEP-DIVE

Abstraction layers.

Each custom hook hides complexity behind a simple interface. The ability to identify the right level of abstraction is what separates good engineers from great ones.

// Abstraction is everywhere:

Operating systems  → abstract hardware
Databases          → abstract storage
APIs               → abstract backend logic
Custom hooks       → abstract stateful patterns

// useLocalStorage handles serialization,
// error recovery, and sync — the consumer
// just uses it like useState.

// Change the hook → every consumer benefits.

REF.MATERIAL

ARTICLE

Reusing Logic with Custom Hooks — React.dev

React Team

The official guide: when to extract hooks, naming conventions, sharing stateful logic, and the rules of hooks.

CUSTOM HOOKSOFFICIALESSENTIAL

VIDEO

Custom Hooks — Web Dev Simplified

Web Dev Simplified

Building custom hooks step by step: useLocalStorage, useToggle, useDebounce, and when extraction makes sense.

CUSTOM HOOKSPRACTICAL

ARTICLE

Rules of Hooks — React.dev

React Team

Why hooks must be called at the top level, why order matters, and what happens if you break the rules.

HOOKSRULESOFFICIAL

TOOL

useHooks — Community Hook Library

usehooks.com

Curated collection of production-ready custom hooks: useLocalStorage, useMediaQuery, usePrevious, useEventListener, and dozens more.

HOOKSLIBRARYCOMMUNITY

VIDEO

10 React Hooks Explained — Fireship

Fireship

Overview of all major React hooks: useState, useEffect, useRef, useContext, useMemo, useCallback, useReducer, and custom hooks.

HOOKSOVERVIEW