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).