What are hooks in React and how do they help you?

React Hooks were introduced in React 16.8 to solve several problems with class components and provide a more direct API to React concepts like state, lifecycle, context, and refs.

Before hooks, sharing stateful logic between components required complex patterns like render props and higher-order components, leading to "wrapper hell." Hooks allow you to extract stateful logic from a component so it can be tested independently and reused.

The most commonly used hooks include: useState for adding state to functional components, useEffect for performing side effects (data fetching, subscriptions, DOM manipulation), useContext for consuming context, useReducer for complex state logic, useMemo and useCallback for performance optimization, and useRef for mutable values that persist across renders.

Hooks must follow two rules: only call hooks at the top level (not inside loops, conditions, or nested functions), and only call hooks from React function components or custom hooks. Custom hooks allow you to create your own hooks to extract and share stateful logic between components, typically prefixed with "use" (e.g., useWindowSize, useFetch).