A JavaScript library for building user interfaces, developed by Meta. It lets you compose UIs from reusable components, manage state declaratively, and update the DOM efficiently through a virtual representation. React is the foundation of countless web applications and the entry point to the modern front-end ecosystem.
React Fiber is not a feature that application developers interact with directly. It is the internal engine that determines how and when React renders. Before Fiber, React used a recursive reconciler that walked the component tree synchronously. Once rendering began, it could not be interrupted. A deeply nested component tree or an expensive render could…
React’s rendering pipeline is divided into two distinct phases with different rules, different guarantees, and different failure modes. The render phase is where React calls component functions, compares the new element tree to the previous one, and determines what needs to change. The commit phase is where React applies those changes to the DOM, runs…
Strict Mode is a development-only wrapper that deliberately runs certain parts of React’s lifecycle more than once. It is not a bug, a performance problem, or something that happens in production. It is a diagnostic tool that surfaces code which violates React’s rules—impure renders, missing effect cleanups, and state that does not reset correctly. The…
Concurrent rendering is not a feature that makes React faster. It is a scheduling model that changes when React does its work. The scheduler assigns a priority to every state update, processes the highest-priority work first, and yields to the browser between small slices of work so that user input is never blocked by a…
Batching is the mechanism by which React groups multiple state updates into a single re-render. Before React 18, batching was limited to updates inside React event handlers. An update inside a setTimeout, a promise callback, or a native event listener triggered a separate render for each update. React 18 extended batching to all update sources,…
A React memory leak is not a failure of React’s garbage collection. React unmounts the component, removes its DOM, and drops its internal references. The leak persists because something outside React still holds a reference to the component’s state, its DOM nodes, or its closures. The common sources are timers, event listeners on window or…
React does not attach event listeners to the DOM elements you write in JSX. It attaches a single listener per event type to the root container, and when a native event fires, React walks its internal Fiber tree to find the components that have handlers for that event, then calls them with a SyntheticEvent—a cross-browser…
Hydration mismatches occur when the HTML generated by the server does not match what React expects during the client’s initial render. React’s hydrateRoot treats this as a bug, not a feature. In development, it warns about the mismatch; in production, it may fall back to client rendering from the nearest Suspense boundary, which discards the…
Hydration has historically been an all-or-nothing operation. The server sends HTML, the browser parses it, and React attaches event handlers to the entire tree before any part of the page becomes interactive. In a large application, the JavaScript bundle can be hundreds of kilobytes, and the main thread can be blocked for hundreds of milliseconds…
Static Site Generation produces the HTML for every route at build time. Each URL maps to a file on disk that a CDN can serve from cache in tens of milliseconds, regardless of where the user is or how many other requests are in flight. The server does no work per request, so Time to…