Effects and Lifecycle

Omitting the second argument runs the effect after every render. An empty array runs it once after mount, with cleanup at unmount. A list of values re-runs it whenever any listed value changes, compared with Object.is.

Both belong in the onClick handler: they are caused by a specific user action, not by the component being displayed. Routing them through state and an effect adds a render pass, an extra state field, and a path for the request to fire twice.

The effect must return a cleanup function that removes the exact listener it added. Without it, every mount leaves another live listener on the MediaQueryList, so subscriptions pile up, unmounted components keep reacting, and the retained closures leak memory.

React treats the returned function as that effect's cleanup. It calls the cleanup before running the effect again after a dependency change, and once more when the component unmounts, so every setup is torn down exactly once.

React compares each dependency with the previous render's value using Object.is, position by position. An object, array or function created in the component body is a new reference on every render, so Object.is always reports a change and the effect re-runs each time.

The effect must return a cleanup function that calls clearInterval with the id setInterval returned. Without it, every mount leaves another live timer behind, so abandoned components keep polling forever and traffic multiplies with each visit.

Effects run after React has rendered and committed the component, so the first render happens before the request is even sent. Every fetch-in-effect component therefore needs hand-written loading, error and empty states.

Create a fresh AbortController inside the effect body, pass controller.signal as fetch's signal option, and return a cleanup that calls controller.abort(). A controller is single-use: once aborted its signal stays aborted, so a shared one poisons every later request.

The child is not mounted until the parent's data arrives, so its effect is never scheduled and its request cannot start. Each nesting level adds a full round trip. Removing it means starting both requests from one place instead of gating one render on the other.

Two fetches for different ids can resolve in the wrong order, so the older response's state update overwrites the newer data. Fix it with an ignore flag declared inside the effect, set to true in its cleanup, that guards every state write.

React attaches DOM refs during the commit phase, after the rendered output is applied to the DOM. While a component renders, the node does not exist yet, so ref.current is still the initial value (null on first render). Read it in effects or event handlers.

Render an empty container element with a ref, create the library instance in an effect from that node, keep the instance in a ref, and destroy it in the effect's cleanup. React renders no children inside that container.

useEffect runs after the browser has painted, so the unmeasured position is visible for one frame. Move the measure-and-reposition work into useLayoutEffect, which React runs synchronously after it mutates the DOM and before the browser paints.

A callback ref is a function passed as an element's ref prop instead of a ref object. React calls it with the DOM node when the element attaches, and with null when it detaches, so you can run code at the exact moment a node appears or disappears.

Component bodies must stay pure. That call runs again on every render, targets a node React has not created yet on the first render, and a document lookup collides across instances. Initialize in an effect against a ref instead.

React's <StrictMode> deliberately mounts each component an extra time in development, running setup, then cleanup, then setup again, so effects that never clean up break loudly. It is development-only; production mounts and runs the effect once.

The ref guard suppresses the warning, not the defect. StrictMode's second run only revealed that the effect never undoes its own setup, and that leak still happens on any real remount in production. The fix is to write the cleanup.

StrictMode also double-invokes the functions React expects to be pure: the component body itself, the initializer function passed to useState, and state updater functions. Running each twice makes impure code — mutation or side effects during render — produce visibly wrong results.

Ask whether a genuine unmount and remount would also double the event. It would, so this is a real defect that development merely surfaced early. Fix it by moving the send to the interaction that causes it, or by making the operation deduplicate outside the component.

Adopt it, but incrementally. <StrictMode> wraps any subtree, not only the root, so enable it around areas as they are cleaned up and expand outward. Treat the noise as a backlog of real cleanup defects, triaged by whether a genuine remount would break the same code.

An error boundary catches an error thrown while rendering anywhere in its subtree and shows fallback UI instead of that subtree. With no boundary above the throwing component, React unmounts the entire tree and the page goes blank.

React error boundaries only catch errors React itself throws while rendering, in constructors, in lifecycle methods, and in effects. They miss event handlers, asynchronous callbacks, server rendering, and the boundary's own errors. The fix is to catch such errors and rethrow them during render.

getDerivedStateFromError is a static, pure, render-phase method that returns a state patch so the boundary renders its fallback. componentDidCatch runs after the commit and is where side effects such as logging belong. Most boundaries implement both.

React exposes error catching only through the class methods getDerivedStateFromError and componentDidCatch; no hook equivalent exists in React 19. Teams write one small boundary class and reuse it, or adopt the react-error-boundary package, which wraps that class in a hook-friendly API.

Recovery needs two steps: clear the boundary's error state so children render again, and clear whatever caused the failure. Clearing only the error re-renders the same inputs, so the component throws immediately and the fallback returns — often in a tight loop.

useEffect with empty dependencies approximates componentDidMount, its returned cleanup approximates componentWillUnmount, and non-empty dependencies approximate componentDidUpdate. The mapping misleads because one effect covers all three, and cleanup runs before every re-run, not only at unmount.

UNSAFE_ marks a legacy render-phase lifecycle, not a security problem. React may pause, abandon and restart a render, so these methods can run more than once or for work that is thrown away. The safe replacements are the commit-phase methods and getDerivedStateFromProps.

It is a static method receiving the next props and current state, called before every render — on mount and on every update, whatever triggered it. It returns an object merged into state, or null. Function components have no direct equivalent: derive during render instead.

React.memo is the function-component counterpart of PureComponent: it shallow-compares props and skips the re-render if they match. PureComponent also shallow-compares state, and shouldComponentUpdate can compare anything — memo sees props only, and its comparator's return value is inverted.

State setters in function components take no callback, so calling measure() right after setOpen(true) runs before React re-renders and commits — it measures the previous DOM. Move the measurement into a useLayoutEffect that depends on the state value.