As components grow, the same stateful logic often appears in several places — fetching data, tracking a toggle, syncing with local storage, debouncing a value. Custom hooks let you extract that logic into a reusable function that other components can call, sharing behaviour without duplicating code. They are one of React's most elegant features: composition applied to logic, not just UI.
A custom hook is simply a function whose name starts with use and which calls other hooks. It can use useState, useEffect, useRef, and even other custom hooks, then return whatever the calling component needs — values, setters, handlers. By convention and by the rules of hooks, the use prefix tells React (and its linter) that this function follows hook rules.
Crucially, custom hooks share logic, not state: each component that calls a hook gets its own independent state. This lesson covers how to write custom hooks, the rules they must follow, and the common patterns — useToggle, useDebounce, useLocalStorage, useFetch — that show how extracting logic makes components dramatically cleaner and more reusable.