WebView

A Higher-Order Component (HOC) is an advanced React pattern where a function takes a component as input and returns a new enhanced component with additional props or behavior. Common use cases include adding authentication checks, analytics tracking, or data fetching logic to existing components. While HOCs were a primary code reuse pattern in class-based React, custom hooks have largely replaced them in modern functional component code due to their simpler composition model.

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.

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.

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.

JSX (JavaScript XML) is a syntax extension for JavaScript used primarily in React that lets you write HTML-like markup directly within your JavaScript code. It gets transpiled by tools like Babel or SWC into regular `React.createElement()` calls before reaching the browser. JSX supports embedding dynamic expressions with curly braces, conditional rendering, and mapping over arrays, making it a powerful and intuitive way to describe UI structures declaratively.

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.