Build Your Own Hooks

// ✓ Valid custom hook names
function useWindowSize() { … }
function useLocalStorage(key, initial) { … }
function useDebounce(value, delay) { … }
function useFetch(url) { … }
function useOnClickOutside(ref, handler) { … }

// ✗ Not hooks — linter won't enforce rules-of-hooks on these
function getWindowSize() { … }   // doesn't start with "use"
function windowSizeHook() { … }  // suffix "Hook" doesn't count

// ✗ Not a hook — returns JSX, so it's a component
function useButton() {
  return <button>Click me</button>;  // → rename to Button, it's a component
}

import { useState } from 'react';

export function useCounter(initial = 0, { min, max } = {}) {
  const [count, setCount] = useState(initial);

  const clamp = n => {
    if (min !== undefined && n < min) return min;
    if (max !== undefined && n > max) return max;
    return n;
  };

  const inc   = (step = 1) => setCount(c => clamp(c + step));
  const dec   = (step = 1) => setCount(c => clamp(c - step));
  const reset = ()          => setCount(initial);
  const set   = (value)     => setCount(clamp(value));

  return { count, inc, dec, reset, set };
}

// Usage examples:
// const { count, inc }       = useCounter();              // 0, no bounds
// const { count, inc, dec }  = useCounter(5, { min: 0, max: 10 });  // clamped
// const { count, inc }       = useCounter(1);             // starts at 1

import { useState } from 'react';

export function useLocalStorage(key, initialValue) {
  // Step 1 — initialize: read from storage or fall back to initialValue
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      // JSON.parse handles numbers, booleans, arrays, objects — not just strings
      return item !== null ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue; // storage unavailable (private browsing, quota full, etc.)
    }
  });

  // Step 2 — setValue: write to storage AND update React state
  const setValue = (value) => {
    try {
      // Support functional updates: setValue(prev => [...prev, newItem])
      const toStore = value instanceof Function
        ? value(storedValue)
        : value;
      window.localStorage.setItem(key, JSON.stringify(toStore));
      setStoredValue(toStore);
    } catch {
      // Quota exceeded or private mode — silently fall back to in-memory state
    }
  };

  return [storedValue, setValue]; // ← same shape as useState's return value
}

import { useLocalStorage } from './hooks/useLocalStorage';

function Settings() {
  // Exactly like useState — but values survive page reloads
  const [theme,    setTheme]    = useLocalStorage('settings.theme', 'dark');
  const [language, setLanguage] = useLocalStorage('settings.lang',  'en');

  return (
    <form>
      <select value={theme} onChange={e => setTheme(e.target.value)}>
        <option>dark</option>
        <option>light</option>
      </select>
    </form>
  );
  // Picking "light" writes to localStorage immediately.
  // Next page load: hook reads it back — the user's choice is remembered.
}

import { useState, useEffect } from 'react';

export function useDebounce(value, delay = 500) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    // Schedule an update after `delay` ms of inactivity
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // Cleanup: if `value` changes before the timer fires, cancel and reschedule
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

import { useState, useEffect } from 'react';
import { useDebounce }         from './hooks/useDebounce';

function SearchBar() {
  const [query, setQuery] = useState('');

  // Only changes after the user stops typing for 500 ms
  const debouncedQuery = useDebounce(query, 500);

  // This effect fires once per "pause", not once per keystroke
  useEffect(() => {
    if (debouncedQuery) searchAPI(debouncedQuery);
  }, [debouncedQuery]);

  return (
    <input
      value={query}
      onChange={e => setQuery(e.target.value)}
      placeholder="Search…"
    />
  );
}

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    if (!url) return;
    let cancelled = false; // prevents setting state after unmount

    setLoading(true);
    setError(null);

    fetch(url)
      .then(res => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then(json => { if (!cancelled) { setData(json);         setLoading(false); } })
      .catch(err  => { if (!cancelled) { setError(err.message); setLoading(false); } });

    return () => { cancelled = true; }; // cleanup: ignore late responses on url change
  }, [url]);

  return { data, loading, error };
}

import { useFetch } from './hooks/useFetch';

function UserProfile({ userId }) {
  const { data: user, loading, error } = useFetch(
    `/api/users/${userId}`
  );

  if (loading) return <Spinner />;
  if (error)   return <ErrorMessage message={error} />;

  return <h1>{user.name}</h1>;
}

// When userId changes, the hook automatically refetches — it's a dependency.
// The cleanup function marks any in-flight request as cancelled.
// The same hook works for any URL: useFetch('/api/posts'), useFetch('/api/me')