Custom Hooks

🔍 What Is It?

A custom hook is a function that:

1. Starts with use — this naming convention lets React and ESLint enforce the Rules of Hooks
2. Calls other hooks — useState, useEffect, useCallback, or other custom hooks
3. Returns values — state, derived data, handler functions, or any combination
4. Has no JSX — custom hooks are pure logic, no rendering

Every time you call a custom hook in a component, it gets its own isolated state. Hooks share logic, not state.

🎯 Why Do We Need It?

Before custom hooks, sharing stateful logic between components required awkward patterns: Higher Order Components (HOC) or Render Props — both added wrapper components and made the component tree harder to read.

Custom hooks solve this cleanly:

• →No wrapper components — logic is extracted, not the component structure
• →Composable — hooks can call other hooks
• →Testable — test the hook in isolation with renderHook
• →Readable — const { data, loading } = useUserProfile(userId) is self-documenting

🏗️ What Happens in Real Projects?

In a large enterprise app, custom hooks are everywhere:

• →useAuth() — returns current user, isLoggedIn, login(), logout()
• →useApi<T>(url) — generic data fetching with loading/error/data states
• →useDebounce(value, delay) — debounces a rapidly-changing value (search input)
• →useLocalStorage(key, initial) — persisted state that survives page refresh
• →usePermissions() — returns what the current user can and cannot do
• →useForm(schema) — form state, validation, and submission handling
• →usePagination(total, pageSize) — page number, navigation functions

⚙️ How It Works

Custom hooks are regular JavaScript functions — React gives them no special treatment beyond the naming convention. When you call useAuth() in a component, React runs the function and all the hooks inside it are associated with that component instance.

Each call gets its own state:

If ComponentA and ComponentB both call useCounter(), they each get completely independent counter state. The hook shares logic, not state.

Composition:

Custom hooks can call other custom hooks. useUserProfile(id) might call useApi(url) internally. This creates a clean abstraction hierarchy.

💻 Example

Custom Hooks from Real Enterprise Projects — A generic API hook, a debounce hook, and a permissions hook.

interface UseApiResult<T> {
  data: T | null;
  loading: boolean;
  error: string | null;
  refetch: () => void;
}

function useApi<T>(url: string): UseApiResult<T> {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [trigger, setTrigger] = useState(0);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    setError(null);

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

    return () => { cancelled = true; };
  }, [url, trigger]);

  const refetch = useCallback(() => setTrigger(t => t + 1), []);

  return { data, loading, error, refetch };
}

// Usage — no boilerplate in the component
function PolicyList({ userId }: { userId: string }) {
  const { data: policies, loading, error, refetch } = useApi<Policy[]>(`/api/users/${userId}/policies`);
  if (loading) return <Spinner />;
  if (error)   return <ErrorBanner message={error} onRetry={refetch} />;
  return <ul>{policies!.map(p => <PolicyRow key={p.id} policy={p} />)}</ul>;
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits