Hooks are functions that let functional components use state, side effects, contexts, and other React features without writing classes. useState returns a [value, setter] pair used to read and update local state. useEffect runs side effects such as data fetching, subscriptions, and manual DOM work after render completes. It accepts an effect function and an optional dependency array; a returned function from the effect is treated as cleanup that runs before the next effect and on unmount.
The dependency array dictates when an effect runs. An empty array means the effect fires only once on mount — useful for one-time setup and a direct replacement for componentDidMount. Passing a list of values means the effect re-runs whenever any of those values change. Omitting the array entirely causes the effect to run after every render, which is rarely what you want. Returning a cleanup function from an effect with an empty dependency array replicates componentWillUnmount, letting you release resources when the component leaves the screen.
Several hooks target specific problems. useContext reads the current value of a React context without needing a Context.Consumer wrapper. useReducer offers an alternative to useState for more elaborate state logic, where state transitions are expressed as actions handled by a reducer function. useMemo memoizes a computed value, recalculating only when its dependencies change, while useCallback memoizes a function reference so the same identity is preserved across renders — handy when passing callbacks to memoized children. In fact, useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).
Two hooks deserve separate mention. useRef returns a mutable object whose .current property persists across renders without triggering a re-render. It is the standard way to access DOM elements directly, as well as to store mutable values like timer IDs or previously seen props. useLayoutEffect is a variant of useEffect that fires synchronously after DOM mutations but before the browser paints, making it the right tool when you need to measure layout and re-render synchronously to avoid visual flicker.
Two universal rules govern all hooks: only call them at the top level of a component, never inside loops, conditions, or nested functions, and only call them from React function components or other custom hooks. These rules ensure hooks are invoked in the same order on every render, which is how React associates each hook with the correct internal slot.