Higher-Order Component

Accessibility (often abbreviated a11y) is the practice of designing and building websites and apps so they can be used by everyone, including people with visual, motor, auditory, or cognitive disabilities. This involves proper semantic markup, keyboard navigation support, sufficient color contrast, and screen reader compatibility. Beyond being an ethical responsibility, accessibility is increasingly a legal requirement in many jurisdictions.

Internationalization (i18n) is the process of designing software so it can be adapted to different languages, regions, and cultures without code changes. This involves externalizing strings, supporting right-to-left (RTL) layouts, handling date/number/currency formatting, and accommodating text expansion. Libraries like react-intl, next-intl, and i18next provide the infrastructure for managing translations and locale-aware formatting in JavaScript applications.

Media queries are a CSS feature that allows you to apply styles conditionally based on device characteristics like viewport width, height, orientation, color scheme preference, or reduced motion settings. They are the backbone of responsive web design, enabling different layouts for mobile, tablet, and desktop screens. Modern media queries also support user preference detection with `prefers-color-scheme` and `prefers-reduced-motion` for more accessible experiences.

Optimistic UI is a pattern where the interface immediately reflects the expected result of a user action before the server confirms it. For example, a "like" button instantly shows the liked state while the API request happens in the background. This makes the app feel significantly faster and more responsive. If the server request fails, the UI rolls back to the previous state and notifies the user.

Reconciliation is React's algorithm for comparing the previous and current Virtual DOM trees to determine the minimum number of changes needed to update the actual DOM. React uses heuristics like element type comparison and the `key` prop to efficiently decide whether to update, replace, or remove DOM nodes. Understanding reconciliation explains why unique `key` props on list items matter — without them, React can't reliably track which items changed, leading to bugs and poor performance.

Color contrast is the measurable difference in luminance between foreground text (or UI elements) and their background. WCAG guidelines require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text to ensure readability for users with visual impairments. Tools like Chrome DevTools, Stark, and WebAIM's contrast checker help developers verify compliance during development.