What are custom hooks and how to create them?

Question

Accepted Answer

**Custom hooks** are JavaScript functions that start with the word **"use"** and can call other React hooks inside them. They let you **extract component logic into reusable functions** — sharing stateful logic between components without changing your component hierarchy. **The three rules of hooks:** 1. **Must start with "use"** — this is how React knows to check for hook rule violations 2. **Can only be called at the top level** — not inside loops, conditions, or nested functions 3. **Can only be called from React function components** or from **other custom hooks** **How custom hooks work:** When you call a custom hook, React runs all the hooks inside it in the context of the **calling component**. Each component that uses the hook gets its own independent state — hooks don't share state between components. **Code — useLocalStorage (persistent state):** ```tsx import { useState, useEffect } from "react"; function useLocalStorage(key: string, initialValue: T) { 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] as const; } // Usage in any component function Settings() { const [theme, setTheme] = useLocalStorage("theme", "light"); const [language, setLanguage] = useLocalStorage("lang", "en"); return (

); } ``` **Code — useDebounce (delay value updates):** ```tsx import { useState, useEffect } from "react"; function useDebounce(value: T, delay: number): T { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const timer = setTimeout(() => setDebouncedValue(value), delay); return () => clearTimeout(timer); }, [value, delay]); return debouncedValue; } // Usage function SearchInput() { const [query, setQuery] = useState(""); const debouncedQuery = useDebounce(query, 300); useEffect(() => { if (debouncedQuery) { fetchResults(debouncedQuery); } }, [debouncedQuery]); return setQuery(e.target.value)} />; } ``` **Code — useMediaQuery (responsive design):** ```tsx import { useState, useEffect } from "react"; function useMediaQuery(query: string): boolean { const [matches, setMatches] = useState(false); useEffect(() => { const media = window.matchMedia(query); setMatches(media.matches); const handler = (e: MediaQueryListEvent) => setMatches(e.matches); media.addEventListener("change", handler); return () => media.removeEventListener("change", handler); }, [query]); return matches; } // Usage function Layout() { const isMobile = useMediaQuery("(max-width: 768px)"); return isMobile ? : ; } ``` **Benefits of custom hooks:** - **Reuse stateful logic** between components without duplicating code - **Keep components focused on UI** — move logic into hooks - **Easier to test** — hooks are plain functions, testable in isolation - **Composable** — one hook can call other hooks, building complex logic from simple pieces **Custom hooks vs utility functions:** A utility function is a plain function that doesn't use hooks. A custom hook **can use other hooks** (useState, useEffect, etc.). If your logic needs state or effects, it must be a custom hook.

React: What are custom hooks and how to create them?