Hook

Detailed Explanation

Hooks are special functions in React that let you "hook into" React features like state and lifecycle events from function components. The most common hooks are useState (manage data that changes), useEffect (run code when something changes, like fetching data), and useRef (reference DOM elements).

Hooks follow rules: only call them at the top level of components (not inside loops or conditions), and only call them from React components or custom hooks. Custom hooks let you extract and reuse stateful logic across multiple components.

React Router provides its own hooks for data and navigation: useLoaderData (access loader data), useActionData (access action responses), useNavigation (check loading and submitting states), and useRouteError (access errors in error boundaries). Zustand provides hooks for state management. Claude Code uses hooks extensively when generating React components and knows the rules for using them correctly.

A common custom hook pattern is the useAuth hook provided by an Auth Provider, which gives any component access to the current user and authentication state.