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.
Server Actions are the mechanism that lets a Client Component call an async function that executes on the server. The ‘use server’ directive marks a function or module as server-executable; the bundler replaces the implementation in the client bundle with a reference, and when the client calls that reference, React sends a POST request to…
The Next.js App Router is not a configuration layer on top of React. It is a file-system router built on React Server Components, where the folder structure under app/ defines the routes, layouts persist across navigations, and every component is a Server Component by default until a ‘use client’ directive marks the boundary where interactivity…
The App Router’s file conventions separate three concerns that the Pages Router merged into a single component: the persistent shell (layout.tsx), the route-specific content (page.tsx), and the pending state while that content resolves (loading.tsx). The separation is what makes navigation fast. When a user moves from /blog to /blog/hello, the layout does not re-render because…
Streaming SSR and progressive hydration are two sides of the same performance strategy. Streaming SSR changes when the server sends HTML: instead of waiting for the entire tree to render and sending one large response, the server sends the shell immediately and streams the slower regions as their data resolves . Progressive hydration changes when…
Micro-frontends solve an organizational problem, not a technical one. When multiple teams contribute to the same React application, the codebase becomes a coordination bottleneck: a small change in one feature can break an unrelated feature, builds slow down as the bundle grows, and releases require synchronized deployment across every team . Module Federation addresses this…
Accessibility in React is not a separate layer applied after the component is built. It is a property of the component’s markup, and React’s rendering model gives you direct control over that markup. The WAI-ARIA specification defines roles, states, and properties that communicate the purpose and current condition of a UI element to assistive technology…
Keyboard navigation is not an optional enhancement layered on top of a mouse-driven interface. It is the primary interaction model for screen reader users, power users, and anyone who cannot use a pointing device. In React, the challenge is that focus is a property of the DOM, not of component state. React’s declarative model renders…
React’s JSX escaping is a powerful default, but it is a narrow one. Every value interpolated inside curly braces—{userInput}—is converted to a text node, so a string like <script>alert(1)</script> renders as literal characters rather than executing . This single default has prevented more reflected and stored XSS than almost any other framework decision. The problem…
React DevTools Profiler is a measurement instrument, not a debugging console. It records what actually happened during a render cycle—which components rendered, how long each took, and why they rendered—and presents that data as a flamegraph or a ranked list. The value of the tool is that it replaces guesswork with evidence. A developer who…
Production builds are not a single command but a sequence of decisions: which bundler processes the source, which environment variables are embedded at build time, and where the resulting artifacts are served from. React’s development build includes warnings and debugging tools that are intentionally removed in production; the production build is typically two to three…