react

React.memo prevents component re-renders when props are unchanged. useMemo caches computed values. useCallback caches function references. Use them only when you have measured performance issues - premature optimization adds complexity without benefit.

Reconciliation is React's diffing algorithm that compares the new virtual DOM tree with the previous one to determine minimal DOM updates. It uses heuristics: different element types trigger full subtree replacement, keys identify items in lists, and same-type elements update attributes.

Concurrent React enables interruptible rendering, allowing React to pause low-priority work for urgent updates. Suspense handles async loading states declaratively. useTransition marks updates as non-urgent, and useDeferredValue defers expensive re-renders.

Error Boundaries are class components that catch JavaScript errors in their child component tree, log them, and display fallback UI. They don't catch errors in event handlers, async code, SSR, or errors thrown in the boundary itself.

Compound Components share implicit state between related components (like <select>/<option>). Render Props pass render functions to share code. Custom Hooks extract reusable stateful logic. Today, Custom Hooks are preferred over Render Props for most cases.

A Higher-Order Component is a function that takes a component and returns an enhanced component with additional props or behavior; they're less common now because React Hooks provide a cleaner solution for logic reuse without wrapper components.

Redux is a predictable state container using a single store with pure reducer functions; Redux Thunk is middleware that enables async logic by allowing action creators to return functions that can dispatch actions and access state.

Key vulnerabilities include XSS (mitigated by React's auto-escaping, but watch dangerouslySetInnerHTML and URL injection), CSRF (use tokens in API requests, SameSite cookies), and insecure storage (avoid localStorage for sensitive data, prefer httpOnly cookies).

A reusable Pagination component manages page state, renders page numbers with ellipsis for large ranges, and exposes both controlled and uncontrolled APIs. It should include keyboard navigation, ARIA attributes for accessibility, and integrate cleanly with server-side pagination endpoints.

List virtualization renders only the items currently visible in the viewport plus a small overscan buffer, replacing thousands of DOM nodes with a handful. This dramatically reduces initial render time, memory usage, and DOM size for large lists.

Hydration is the process where React attaches event handlers and state to server-rendered HTML, making it interactive without re-rendering the DOM. Mismatches occur when server and client HTML differ, causing React to discard and re-render the affected subtree.

React's diffing algorithm achieves O(n) complexity using two heuristics: elements of different types produce entirely different trees (tear down and rebuild), and elements of the same type are compared attribute-by-attribute. Keys enable efficient list reconciliation by matching children by identity rather than position.

A simplified useState uses a module-level array to store state values and an index counter to track which state slot to use. The setter updates the stored value and triggers a re-render. The call-order dependency on the array index explains why hooks cannot be called conditionally.

A simplified useEffect stores effect callbacks and their dependency arrays in a module-level array. After each render, it compares current dependencies against previous ones using shallow equality and runs the effect callback (plus its cleanup) only when dependencies have changed.