Props Drilling

Redux is a predictable state management library that stores the entire application state in a single immutable store, updated exclusively through dispatched actions and pure reducer functions. Redux Toolkit (RTK) is now the recommended way to use Redux, dramatically reducing boilerplate with utilities like `createSlice` and `createAsyncThunk`. While Redux remains popular in large enterprise applications that benefit from strict unidirectional data flow and time-travel debugging, lighter alternatives like Zustand have gained ground for simpler use cases.

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.

CSS Modules are CSS files where all class names are locally scoped by default, meaning they're automatically transformed into unique identifiers at build time to prevent naming collisions. You import them into your JavaScript as an object and reference classes like `styles.button` instead of plain strings. This approach is natively supported by bundlers like Webpack, Vite, and Next.js, offering style isolation without the runtime overhead of CSS-in-JS.

A modal (or modal dialog) is a UI element that overlays the main content to demand user attention and interaction before they can return to the underlying page. Modals are used for confirmations, forms, alerts, and content previews. Proper implementation requires focus trapping, keyboard accessibility (Escape to close), and preventing background scroll — making accessible modals more complex than they appear.

Container Queries allow CSS styles to respond to the size of a parent container rather than the browser viewport, solving a long-standing limitation of media queries. By marking an element as a containment context with `container-type`, its children can use `@container` rules to adapt their layout based on the container's dimensions. This makes truly reusable components possible — a card component can rearrange itself whether it's in a sidebar or a full-width section.