Tree Shaking

CSS Animation uses `@keyframes` rules and the `animation` property to create complex, multi-step animations entirely in CSS without JavaScript. Combined with CSS transitions for simple state changes, these tools handle most UI animation needs performantly since browsers can optimize them on the GPU compositor thread. Properties like `transform` and `opacity` are particularly efficient to animate because they don't trigger layout recalculations or repaints.

State management refers to the strategies and tools used to handle, store, and synchronize application data across components in a frontend application. In React, state can live locally in components via `useState`, be shared via Context, or be managed by external libraries like Redux, Zustand, Jotai, or Recoil. Choosing the right state management approach depends on your app's complexity — many apps over-adopt heavy solutions when simpler patterns would suffice.

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.

Code splitting is an optimization technique that breaks a JavaScript bundle into smaller chunks that are loaded on demand, rather than forcing users to download the entire application upfront. In React, this is achieved through `React.lazy()` and dynamic `import()` statements, which create separate bundles loaded only when the corresponding component or route is accessed. This dramatically improves initial load times, especially for large single-page applications with many routes.

Responsive design is an approach to web development where layouts, images, and UI elements adapt fluidly to different screen sizes and devices. It relies on flexible grids, media queries, and relative units like `rem`, `%`, and `vw` to ensure a consistent experience from mobile phones to large monitors. Modern responsive design increasingly uses CSS Container Queries and intrinsic sizing techniques to create components that respond to their own container rather than the viewport.

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.