Code Splitting

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.

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.

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.

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.

Drag and drop is an interaction pattern that lets users move, reorder, or transfer UI elements by clicking (or touching), holding, and dragging them to a new position. It's used for file uploads, kanban boards, sortable lists, and layout builders. The HTML Drag and Drop API provides native browser support, while libraries like dnd-kit and react-beautiful-dnd offer more polished, accessible, and touch-friendly implementations.

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.