State Management

Focus management is the practice of controlling which element receives keyboard focus in a web application, especially during dynamic content changes. When a modal opens, focus should move into it; when it closes, focus should return to the trigger element. Proper focus management is essential for keyboard and screen reader users, and involves techniques like focus trapping, roving tabindex, and programmatic focus with `element.focus()`.

Memoization in React is a performance optimization that caches the result of expensive computations or component renders to avoid redundant work on re-renders. React provides `React.memo()` to skip re-rendering a component when its props haven't changed, `useMemo()` to cache computed values, and `useCallback()` to cache function references. While powerful, premature memoization adds complexity — it's best applied after profiling confirms an actual performance bottleneck.

Static Site Generation (SSG) is a rendering strategy where HTML pages are pre-built at build time rather than generated on each request. The resulting static files can be served from a CDN with extremely fast load times and minimal server infrastructure. Frameworks like Next.js, Gatsby, and Astro support SSG, often combined with Incremental Static Regeneration (ISR) to update specific pages in the background without rebuilding the entire site.

Infinite scroll is a UX pattern where new content loads automatically as the user scrolls toward the bottom of the page, eliminating traditional pagination. It's commonly used in social media feeds and content discovery interfaces. While it increases engagement and feels seamless, it can hurt performance without virtualization and makes it difficult for users to reach footer content or bookmark specific positions.

CSS Grid is a two-dimensional layout system that lets you define rows and columns simultaneously, making it ideal for complex page layouts. Unlike Flexbox which works in one axis at a time, Grid allows you to place items precisely in both horizontal and vertical directions using named areas or line numbers. Features like `grid-template-areas`, `auto-fill`, and `minmax()` make it possible to create responsive layouts with minimal code.

Design tokens are the smallest units of a design system — named values representing colors, spacing, typography, border radii, and other visual properties. They act as a single source of truth that can be translated into platform-specific formats (CSS variables, Swift constants, XML resources). By changing token values in one place, you can update the look and feel of an entire application across multiple platforms simultaneously.