react

Accessible React apps start with semantic HTML elements, use ARIA attributes only when native semantics fall short, manage focus programmatically for dynamic content, and ensure full keyboard navigation — interviewers test whether you treat a11y as an afterthought or a first-class concern.

React components are reusable, self-contained UI building blocks — functional components (plain functions returning JSX) have replaced class components for most use cases since hooks were introduced in React 16.8.

Concurrent rendering lets React interrupt and prioritize work — Suspense provides declarative loading states, useTransition marks updates as non-urgent, and useDeferredValue defers expensive re-renders.

Context provides data to any descendant component without passing props through every level — it solves prop drilling but is not state management, and context value changes re-render all consumers.

React enforces one-way data flow — data moves from parent to child via props, and children communicate upward through callback functions, making state changes predictable and traceable.

Error boundaries are class components that catch JavaScript errors during rendering and lifecycle methods, displaying a fallback UI instead of crashing the entire app — but they don't catch errors in event handlers, async code, or SSR.

Controlled components use React state as the single source of truth for input values, while uncontrolled components let the DOM manage state and use refs to read values — each has tradeoffs for performance and complexity.

React is a UI library (not a framework) that uses a virtual DOM for efficient updates, component-based architecture for reusability, and unidirectional data flow for predictable state management.

Hooks let functional components manage state (useState), run side effects (useEffect), access refs (useRef), and extract reusable logic into custom hooks — all following strict rules about call order.

React's reconciliation algorithm diffs virtual DOM trees in O(n) using two heuristics — different element types tear down the subtree, same types compare attributes — while the Fiber architecture makes this work interruptible so the browser stays responsive during large updates.

JSX is a syntax extension that lets you write HTML-like markup in JavaScript — it compiles to function calls (React.createElement or the automatic jsx runtime) and provides XSS protection by escaping values by default.

UI component libraries fall into two categories — styled systems (MUI, Chakra) ship complete designs out of the box, while headless primitives (Radix, Headless UI) provide accessible behavior without opinions on styling, and shadcn/ui bridges the gap with copy-paste Radix+Tailwind components you own.

When rendering lists with .map(), each item needs a unique key prop so React's reconciliation algorithm can efficiently track which items changed, were added, or removed between renders.

React patterns evolved from mixins to HOCs to render props to hooks — compound components share implicit state for flexible APIs, while custom hooks have replaced most logic-sharing patterns.

React.memo skips re-renders when props haven't changed, useMemo caches computed values, and useCallback caches function references — but these are targeted optimizations, not defaults for every component.

Props are read-only inputs passed from parent to child components — they enable one-way data flow, with callback props providing the mechanism for children to communicate back to parents.

React Router provides client-side routing with nested routes and Outlet for layout composition, hooks for navigation (useNavigate, useParams), and data APIs (loaders/actions) for fetching data before rendering.

JSX auto-escapes values to prevent XSS by default, but dangerouslySetInnerHTML, href='javascript:', and localStorage token storage are common vulnerability vectors that require explicit mitigation.

State is internal, mutable data owned by a component — updates must be immutable (creating new objects, not mutating existing ones) and are batched asynchronously in React 18+ for performance.

Redux provides predictable state with a single store, actions, and reducers (RTK simplifies this with createSlice). Zustand offers a lighter alternative. Choose based on app complexity — most apps can start with useState + Context.