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.
The compound component pattern is the React equivalent of HTML’s <select> and <option>. A native <select> manages its own state internally, and the <option> elements are configuration—they do not need to know how the dropdown works, only that they belong to it. The parent controls the behavior, the children declare the content, and the two…
The control props pattern is the mechanism that powers React’s own <input>. When you pass a value prop to an input, React stops managing the input’s state internally and defers to you. It still tells you what it would have done via onChange, but the decision is yours. The pattern generalizes that behavior to any…
A React component’s DOM output normally lands inside its parent’s DOM element. The component tree and the DOM tree are assumed to mirror each other. Portals break that assumption deliberately. createPortal(children, domNode) renders the children into a DOM node that exists anywhere in the document, while keeping the children in the same position in the…
React Testing Library (RTL) is not a test runner. It is a set of utilities that render a React component into a DOM and provide queries for finding elements the way a user would find them—by role, by label, by text—rather than by implementation details like component state or class names . The library’s guiding…
A component test that renders markup and asserts on the output is only half a test. The other half is the interaction: the user types into a field, clicks a button, presses Escape, tabs through a form, or holds a modifier key while clicking. React Testing Library’s userEvent library exists to simulate those interactions with…
Mock Service Worker is not a Jest mock. It is a network-level interceptor. When your React component calls fetch(‘/api/users’), MSW intercepts that request before it leaves the process, matches it against the handlers you defined, and returns the mocked response as if it came from a real server . The component’s actual fetch call runs,…
End-to-end testing is the only layer of the test pyramid that exercises the entire application the way a user does: the browser loads the real bundle, the real router resolves the real URL, the real API calls go over the network, and the real DOM is asserted on after the real React render cycle. Unit…
The difference between SSR and SSG is not about the code you write. It is about when the HTML is generated. In both cases, React components render on a server, the output is HTML, and the browser receives a page that is already populated with content before any JavaScript runs. The distinction is the trigger:…
React Server Components are not a rendering mode. They are a new kind of component. A Server Component runs ahead of time, in an environment separate from the client application and separate from the traditional SSR server, and its code never ships to the browser . That separation is the architectural core. The component can…
The rules that separate Server Components from Client Components are not stylistic guidelines. They are enforced by the compiler, the bundler, and the React runtime, and violating them produces build errors or serialization exceptions. The core rule is deceptively simple: a component is a Server Component by default, and it becomes a Client Component only…