Dart

Tree shaking is a dead code elimination technique used by modern bundlers like Webpack, Rollup, and esbuild to remove unused exports from the final JavaScript bundle. It relies on the static structure of ES module `import`/`export` syntax to determine which code is actually referenced and safely discard the rest. For tree shaking to work effectively, libraries must use ESM format and avoid side effects in their module initialization, which is why the `sideEffects` field in `package.json` matters.

React Server Components (RSC) are components that render exclusively on the server and send only their HTML output to the client, with zero JavaScript bundle impact. They can directly access databases, file systems, and backend services without API endpoints. Combined with Client Components (marked with `'use client'`), RSC enables a hybrid architecture where interactive parts ship JavaScript while static or data-heavy parts remain server-only. Next.js App Router uses RSC as its default component model.

Props drilling is the practice of passing data through multiple levels of intermediate components that don't actually use the data themselves, just to get it to a deeply nested child that needs it. This creates tight coupling between components and makes refactoring painful. Common solutions include React's Context API for global-ish state, state management libraries like Zustand or Redux, or component composition patterns that restructure the tree to reduce nesting depth.

Breadcrumb navigation is a secondary navigation pattern that shows the user's current location within a site hierarchy as a trail of links (e.g., Home > Products > Shoes). It helps users understand where they are and quickly navigate back to parent pages without relying on the browser's back button. Proper implementation uses an ordered list within a `<nav>` element with `aria-label="Breadcrumb"` for accessibility.

CSS-in-JS is an approach where styles are written directly in JavaScript files, often co-located with the components they style. Libraries like Styled Components, Emotion, and Stitches generate unique class names at build time or runtime, eliminating style conflicts. While it enables dynamic styling based on props and full encapsulation, the trend has shifted toward zero-runtime solutions and utility-first CSS due to performance concerns.

Drag and drop is an interaction pattern that lets users move, reorder, or transfer UI elements by clicking (or touching), holding, and dragging them to a new position. It's used for file uploads, kanban boards, sortable lists, and layout builders. The HTML Drag and Drop API provides native browser support, while libraries like dnd-kit and react-beautiful-dnd offer more polished, accessible, and touch-friendly implementations.