React Advanced FAQ & Answers

Concurrent rendering allows React to prepare multiple UI versions simultaneously and pause/resume work based on priority. Selective hydration leverages this to hydrate interactive components before non-critical content. Mechanism: wrap non-critical UI sections in <Suspense> boundaries. React streams HTML from server, begins hydrating immediately, but prioritizes visible and interactive content first (header, buy buttons) while deferring off-screen content (reviews, comments). Hydration happens in small chunks - browser can pause React's work to handle user interactions, keeping UI responsive. Implementation: <Suspense fallback={<Spinner />}><HeavyComponent /></Suspense> - HeavyComponent hydrates only when needed. Benefits over traditional SSR: (1) Users can interact with critical UI before full page hydration, (2) Main thread remains responsive during hydration, (3) React automatically prioritizes based on user interaction. Requires React 18+ with streaming SSR (Next.js 13+ App Router, Remix). Combine with React.lazy() for code splitting.

Performance improvements: (1) Faster Time to Interactive (TTI) - 40-60% reduction reported by production apps (Wix: 40% faster interaction). Users interact with critical UI immediately while non-critical content hydrates in background. (2) Non-blocking hydration - main thread remains responsive, no long tasks blocking user input. (3) Reduced total blocking time - hydration happens in small chunks (<50ms each) instead of one blocking operation. (4) Better perceived performance - interactive content (buttons, forms) usable within 1-2 seconds, even if full page takes 10+ seconds. (5) Automatic prioritization - React hydrates components user is likely to interact with first (based on viewport, user actions). Measurement: use Chrome DevTools Performance panel to measure INP (Interaction to Next Paint) - selective hydration improves INP scores by 30-50%. Critical for large SSR applications with heavy client-side interactivity. Best practices: wrap heavy components (data tables, charts, comments) in Suspense, prioritize above-the-fold content.

startTransition marks state updates as non-urgent (transitions), allowing React to defer them if higher-priority updates occur. Syntax: startTransition(() => { setState(newValue); }) or const [isPending, startTransition] = useTransition() for pending state. How it works: React splits updates into urgent (typing, clicking) and transitions (filtering, rendering). Urgent updates execute immediately. Transition updates are interruptible - React can pause mid-render to handle urgent updates, then resume transition. No manual timing control needed (unlike debounce/throttle). Implementation: function SearchResults() { const [query, setQuery] = useState(''); const [results, setResults] = useState([]); const handleChange = (e) => { setQuery(e.target.value); // Urgent update (input value); startTransition(() => { setResults(filterLargeList(e.target.value)); // Deferred update }); }; return <><input value={query} onChange={handleChange} /><Results data={results} /></>; }. Benefits: input remains responsive (60fps) while expensive filtering happens in background. Use isPending for loading indicators during transitions.

Use startTransition for: (1) Search filters with live results - typing is urgent, filtering large datasets is deferred. (2) Tab switching with heavy content - tab highlight is urgent, rendering tab content is deferred. (3) Data visualizations - user input is urgent, chart re-rendering is deferred. Advantages over debounce/throttle: (1) No artificial delays - updates start immediately but at lower priority. (2) Interruptible renders - React pauses low-priority work automatically. (3) No manual timing tuning - React handles scheduling. (4) Better UX - shows pending state, no input lag. Debounce/throttle when: (1) Rate-limiting API calls (server-side constraint). (2) Scroll/resize handlers (prevent excessive execution). (3) Auto-save functionality (batching writes). Performance: startTransition provides 2-3x better perceived responsiveness - input feels instant even with expensive updates. Don't use startTransition for: critical updates (form submission, navigation), APIs without debounce (causes excessive requests). React 19 enhances with automatic batching across transitions.

Rendering scope: SSR renders entire pages as HTML on server, sends to client, requires full hydration. RSC renders individual components on server, outputs JSON-like serialized React elements, no hydration needed for server components. Code shipping: SSR ships all component code to client (large bundles). RSC server component code never ships to client (zero bundle impact) - only client components download JavaScript. Data access: SSR components fetch data then serialize to props/HTML. RSC can directly access server resources (databases, filesystems, env variables) without serialization overhead. Rerendering: SSR only on initial page load. RSC refetch from server on rerenders, merge into client-side React tree. Hydration: SSR requires full hydration (attach event listeners, state). RSC components are static, no hydration needed. Composition: SSR all components render same way. RSC can import client components (marked with 'use client'), but client components cannot import server components. They are complementary not competitive - RSC works alongside SSR, client components are still SSR'd on initial load.

Pros: (1) Massive bundle reduction - 30-50% smaller client bundles (server components not shipped). (2) Direct server access - query databases, read files, access environment variables without API routes. (3) Better performance - faster First Contentful Paint (FCP) as server doesn't wait for data, resolves dependencies server-side. (4) No hydration overhead - server components remain static. (5) Eliminates prop drilling - fetch data where needed, not at top level. Cons: (1) Cannot use React hooks (useState, useEffect, useRef) in server components. (2) No browser APIs or event handlers ('onClick', 'onChange') in server components. (3) Framework dependency - requires Next.js 13+ App Router, Remix with future flags. (4) Learning curve - understanding server/client boundary ('use client' directive). (5) Potential over-fetching if not architected correctly. When to use: RSC for data fetching, layouts, static content, markdown rendering. Client components for interactivity, forms, animations, browser APIs. Production status: Stable in React 19 (2025), production-ready in Next.js 14+. Recommended for new applications with heavy data requirements.

Use useMemo when: (1) Computation takes >10ms (verify with React Profiler - record component, check render times). (2) Expensive operations: filtering/sorting large arrays (>1000 items), complex calculations, heavy transformations. (3) Value is dependency of other hooks (useEffect, useMemo, useCallback). Use useCallback when: (1) Passing callback to memoized child component (wrapped in React.memo). (2) Callback is dependency of useEffect/useMemo in child component. (3) Creating event handlers for items in large lists (prevents re-creating thousands of functions). When NOT to use: (1) Simple calculations (<1ms) - overhead outweighs benefits. (2) Primitive values (numbers, strings) - React compares by value anyway. (3) Local handlers not passed to children - no re-render benefit. (4) Without React.memo on children - useCallback has no effect. **Best practice:** Profile first with React DevTools Profiler. Measure don't guess. Add memoization only when profiling shows performance issues (>16ms renders causing frame drops). React 19's Compiler auto-memoizes, reducing manual usage. Rule: start without memoization, add when bottlenecks identified.

Performance costs: (1) Memory overhead - every memoized value stored in memory until component unmounts. Large apps with thousands of memoizations consume 5-10MB extra RAM. (2) Cache comparison overhead - React compares all dependencies on every render using Object.is. Simple components run 10-15% slower with unnecessary memoization. (3) Garbage collection pressure - more objects for GC to track, can cause occasional frame drops. (4) Developer cognitive load - increases code complexity, makes components harder to understand. Common mistakes: (1) Memoizing all handlers without React.memo on children (zero benefit, pure overhead). (2) Missing dependencies - stale closures, bugs. (3) Excess dependencies - cache invalidates too often, defeats purpose. (4) Memoizing object creation instead of moving outside component. When overhead exceeds benefit: Components rendering <16ms, memoizing primitive values, caching simple object creations. Measurement: Use React DevTools Profiler - compare with/without memoization. If render time difference <2ms, remove memoization. React 19 solution: React Compiler auto-memoizes optimally at build time, eliminates manual overhead and bugs.

Suspense enables declarative loading states for async operations. Mechanism: component attempts to read data during render → if data not ready, throws Promise → React catches promise, suspends component rendering, shows <Suspense fallback> → when promise resolves, React retries render with data. Implementation: React 19 use() hook: function User({id}) { const user = use(fetchUser(id)); return <div>{user.name}</div>; }. Wrap in Suspense: <Suspense fallback={<Loading />}><User id={123} /></Suspense>. When User renders and data not ready, Loading shows. When data loads, User renders. Parallel loading: Multiple Suspense boundaries load independently. <Suspense><ProductInfo /></Suspense><Suspense><Reviews /></Suspense> - both load in parallel, show individually when ready. Nested Suspense: Outer boundary shows until any child starts loading, inner boundaries show when specific sections load. Requirements: Data source must support Suspense - React Query (v5+), SWR (v2+), React 19 use() hook, or custom Suspense-enabled libraries. Doesn't work with useEffect-based fetching (use use() hook instead). React 19 enhancements: better SSR integration with streaming, improved error handling across async boundaries.

Suspense handles loading states, Error Boundaries handle error states - combine for complete async handling. Pattern: wrap Suspense in Error Boundary: <ErrorBoundary fallback={<ErrorUI />}><Suspense fallback={<Loading />}><DataComponent /></Suspense></ErrorBoundary>. Flow: (1) Component renders → throws Promise → Suspense catches → shows Loading. (2) Promise resolves → component renders with data. (3) Promise rejects → Error Boundary catches → shows ErrorUI. Error Boundary implementation: Class component with static getDerivedStateFromError() and componentDidCatch(), or use library (react-error-boundary). Example: class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError(error) { return { hasError: true }; } render() { if (this.state.hasError) return this.props.fallback; return this.props.children; } }. Granular error handling: Multiple Error Boundaries for different sections - header error doesn't break entire page. Reset errors: Provide retry button: <ErrorBoundary fallback={<div><p>Error</p><button onClick={resetError}>Retry</button></div>}>. React 19: improved error handling across async boundaries, better error messages with component stacks.

use() hook consumes resources (Promises, Context) during render - breaking traditional "hooks only in component body" rule. Syntax: const data = use(promise) or const value = use(Context). Key innovation: Can be called conditionally (unlike useState, useEffect): if (condition) { const data = use(fetchData()); }. For Promises: component reads promise → if pending, React suspends component (requires Suspense boundary) → when resolved, component rerenders with data. For Context: alternative to useContext with conditional support. Example: function Comments({postId}) { const comments = use(fetchComments(postId)); return comments.map(c => <div key={c.id}>{c.text}</div>); }. Wrap in Suspense: <Suspense fallback={<Loading />}><Comments postId={123} /></Suspense>. Promise stability: Promise must be stable across renders - wrap in useMemo or use external cache: const promise = useMemo(() => fetchComments(postId), [postId]); const comments = use(promise). Works with Server Components - server can pass promises to client components. Error handling: Combine with Error Boundary: promise rejection caught by nearest Error Boundary.

use() advantages over useEffect: (1) No loading state boilerplate - integrates with Suspense automatically, no manual isLoading state. (2) Eliminates waterfall fetches - useEffect runs after render (fetch → render → fetch), use() suspends during render (parallel fetches). (3) One less render cycle - useEffect: mount with null data → fetch → rerender with data (2 renders). use(): suspends → renders with data (1 render). (4) Conditional usage allowed - if (condition) use(promise) works, conditional useEffect is anti-pattern. (5) Server Component compatibility - use() works with RSC, useEffect doesn't. (6) Better error handling - errors bubble to Error Boundary naturally, no manual try/catch in useEffect. Performance: 30-40% faster data loading by eliminating waterfalls and extra renders. When to still use useEffect: Side effects (analytics, subscriptions, DOM manipulation), browser-only APIs, effects not tied to render. Migration: Replace useEffect(() => { fetchData().then(setData); }, []) with const data = use(fetchData()) + Suspense boundary. React 19 killer feature for data fetching - prefer use() over useEffect for async data.

React.memo is Higher-Order Component that memoizes component, preventing re-renders when props unchanged. Syntax: const MemoComponent = React.memo(Component). Default comparison: Shallow equality using Object.is() - primitives compared by value, objects/arrays compared by reference. Example: const Button = React.memo(({onClick, label}) => <button onClick={onClick}>{label}</button>). Parent rerenders → React compares old props vs new props → if same, skip child render → if different, render child. Gotcha: Object/array props must be stable (use useMemo) and function props must be stable (use useCallback), otherwise memoization breaks. Bad: <Button onClick={() => {}} /> - new function every render, always rerenders. Good: const handleClick = useCallback(() => {}, []); <Button onClick={handleClick} /> - same function reference, memoization works. Performance: 40-60% fewer renders for components with frequently-updating parents but stable props. Overhead: shallow comparison on every parent render (~0.1ms). Don't memo: fast components (<5ms render), components that rerender anyway, root components. Profile first with React DevTools.

Custom comparison: second argument to React.memo: React.memo(Component, (prevProps, nextProps) => areEqual). Return true to skip render (props equal), false to render. Use custom comparison when: (1) Large objects/arrays with deep equality - default shallow check insufficient: (prev, next) => JSON.stringify(prev.data) === JSON.stringify(next.data) (use deep-equal library for better performance). (2) Specific props should be ignored - only check subset: (prev, next) => prev.id === next.id && prev.name === next.name (ignores other props). (3) Function props semantically equal - compare function.toString() or use stable references. (4) Complex data structures - custom logic based on business rules. Gotchas: (1) Custom comparison runs on every parent render - must be fast (<1ms), slow comparisons worse than re-rendering. (2) Avoid JSON.stringify for large objects - O(n) complexity, use shallow checks or libraries (fast-deep-equal, lodash.isEqual). (3) Inverse logic - returns true to skip (unlike shouldComponentUpdate). When not to use: Simple props, frequently changing props, comparisons slower than component render. React 19 Compiler makes custom comparisons rarely needed.

Component composition (passing components as props/children) often outperforms prop drilling for non-shared state. Composition example: <Layout sidebar={<UserSidebar user={user} />}> instead of drilling user through Layout → Sidebar → UserSidebar. Performance benefits: (1) Granular re-renders - only affected components rerender. When user changes, only UserSidebar rerenders, not Layout or intermediate components. (2) No intermediate processing - Layout doesn't receive/forward user prop, saves memory and CPU. (3) Better code splitting - components bundled independently. (4) 20-30% faster than deep prop drilling (5+ levels) in benchmarks. Composition pattern: function Page() { const user = useUser(); return <Layout sidebar={<UserSidebar user={user} />} header={<Header user={user} />}><Content /></Layout>; }. Layout receives rendered components, not props to process. When to use: Component trees (layouts, pages), when data needed by specific descendants, when multiple props flow together. When NOT to use: True global state (theme, auth), 1-2 levels (prop drilling simpler), data needed by many siblings (context better).

Context trade-offs: Solves prop drilling but causes all consumers to re-render on context value changes. Example: <ThemeContext.Provider value={{theme, setTheme}}> - every component using useContext(ThemeContext) rerenders when theme OR setTheme changes, even if they only use theme. Performance comparison: Context is 10-15% slower than composition but cleaner than deep prop drilling (5+ levels). Prop drilling (1-2 levels): fastest, simplest. Composition: 20-30% faster than context for local state. Context: best for true global state. Optimization strategies: (1) Split contexts - separate by update frequency: <ThemeContext><UserContext> - theme changes don't rerender user consumers. (2) Memoize context value: const value = useMemo(() => ({theme, setTheme}), [theme]) - prevents object recreation. (3) Context selectors - use-context-selector library: const theme = useContextSelector(ThemeContext, ctx => ctx.theme) - only rerenders when theme changes. (4) Combine with React.memo - memo'd components below context don't cascade rerender. Best practice 2025: Composition for component trees, context for global state (theme, auth, i18n), state management libraries (Zustand, Jotai) for complex shared state.

React 18 batching: Automatic for synchronous code in React event handlers. Multiple setState calls in onClick batch into single render. NOT batched: async callbacks (setTimeout, promises, native events). Example: function handleClick() { setState1(x); setTimeout(() => setState2(y)); } - React 18 causes 2 renders (setState1 batched, setState2 separate). React 19 enhancement: Extends automatic batching to ALL contexts - promises, async/await, setTimeout, native event listeners, queueMicrotask. Same example: async function handleClick() { setState1(x); await fetch('/api'); setState2(y); setState3(z); } - React 19 batches all 3 updates into single render. Benefits: (1) 20-30% fewer renders in async-heavy apps (data fetching, animations). (2) Better performance - less DOM reconciliation, fewer layout calculations. (3) Cleaner code - no manual unstable_batchedUpdates() wrapper. (4) Automatic optimization - developers don't think about batching. Edge case: Need separate renders for animations/transitions? Use flushSync() to opt out: setState1(x); flushSync(() => setState2(y)); - forces separate renders. Free performance win for apps upgrading to React 19.

Implications for developers: (1) Fewer renders automatically - existing async code gets free performance boost without changes. (2) Possible breaking changes - rare, but code relying on multiple renders for side effects may break. Check components with useEffect watching state updated in async code. (3) Timing changes - state updates complete faster (single batch vs multiple renders), may affect animations or transitions expecting separate renders. (4) Simplified patterns - remove manual batching workarounds: delete unstable_batchedUpdates(), ReactDOM.flushSync() wrappers (unless specifically needing separate renders). Testing implications: Integration tests expecting multiple renders need updates. Use waitFor with specific assertions rather than counting renders. Performance wins: Async-heavy apps (data dashboards, real-time features) see 20-30% render reduction. Example: form with async validation - onChange + validation + setState all batch into one render. Combine with transitions: Batching within startTransition remains interruptible - React can pause batched low-priority updates for urgent updates. Opt-out when needed: flushSync(() => setState(x)) forces immediate separate render for animations, measurements requiring layout calculations.

React Compiler (formerly React Forget) is automatic memoization compiler that analyzes components at build time and inserts optimal memoization without manual useMemo/useCallback/React.memo. How it works: (1) Analyzes component data flow during build (Babel/webpack plugin). (2) Identifies expensive computations and stable values. (3) Auto-inserts memoization based on dependency analysis. (4) Optimizes better than manual memoization (compiler sees full data flow). Example: function Component({items}) { const filtered = items.filter(i => i.active); const sorted = filtered.sort((a,b) => a.value - b.value); return sorted.map(i => <div key={i.id}>{i.name}</div>); } - Compiler auto-memoizes filtered and sorted based on items dependency. Integration: Opt-in via Babel plugin, per-component with 'use compiler' directive, or project-wide. Compatible with React 17, 18, 19. Production status: Production-ready in React 19 (2025), available as experimental plugin for React 18. Limitations: (1) Requires build step (Babel/webpack). (2) Some edge cases need manual optimization. (3) Not compatible with class components. Performance: 30% average improvement from optimal memoization, eliminates dependency bugs.

Code changes: (1) Remove manual memoization - delete most useMemo, useCallback, React.memo (compiler handles automatically). (2) Write readable code - focus on clarity over performance, compiler optimizes. (3) Eliminate dependency arrays - no more missing dependency bugs or lint warnings. (4) Smaller bundles - less memoization boilerplate code. Development workflow: (1) Enable compiler incrementally - add 'use compiler' per component or directory. (2) Profile to verify - use React DevTools to confirm compiler optimizations. (3) Rare manual optimization - only for dynamic/runtime-specific cases compiler can't analyze. Migration strategy: (1) New projects: enable compiler from start. (2) Existing projects: enable gradually (per-route, per-feature), remove manual memoization after verification. (3) Keep React.memo for third-party components or complex custom comparisons. Future (React 20+): Compiler enabled by default, manual memoization becomes rare exception. Benefits: Focus on features not performance micro-optimizations, fewer bugs (no stale closures from wrong dependencies), better performance (optimal memoization), cleaner codebase. Adoption in 2025: production-ready, major frameworks (Next.js, Remix) adding compiler support.

Virtualization (windowing) - best solution for 1000+ items: render only visible items in viewport plus small buffer. Libraries: (1) TanStack Virtual (recommended 2025) - 4KB, framework-agnostic, supports variable heights, horizontal/vertical, grid layouts. (2) react-window (lightweight, 3KB) - simple API, fixed heights, battle-tested. (3) react-virtuoso - handles variable heights automatically, simpler API. Implementation: import { useVirtualizer } from '@tanstack/react-virtual'; function List({items}) { const parentRef = useRef(); const virtualizer = useVirtualizer({count: items.length, getScrollElement: () => parentRef.current, estimateSize: () => 35}); return <div ref={parentRef} style={{height:'400px',overflow:'auto'}}>{virtualizer.getVirtualItems().map(item => <div key={item.index} style={{height:item.size}}>{items[item.index].name}</div>)}</div>; }. Performance: Constant memory usage regardless of list size, 60fps scrolling, 95% memory reduction (1000 items → render ~20). Considerations: Items not in DOM (SEO issues - use pagination for public content), complex initial setup, accessibility challenges (ensure keyboard navigation, screen reader support). Combine with lazy loading for data fetching.

Use virtualization when: (1) 1000+ items need to be scrollable in single view (logs, chat history, data tables). (2) Uniform or calculable item heights. (3) SEO not critical (internal tools, dashboards). (4) User needs smooth infinite scrolling experience. (5) Performance critical (maintaining 60fps). Use pagination when: (1) SEO-critical content (product listings, blog posts, search results). (2) Variable, unpredictable item heights (complex cards, images). (3) Simpler implementation acceptable. (4) Users prefer discrete pages for navigation/bookmarking. (5) Server-side filtering/sorting needed. Hybrid approach: Infinite scroll with virtualization - best of both worlds. Load pages on demand, virtualize visible items: react-virtuoso with endReached callback. Performance comparison: Virtualization handles millions of items (constant O(1) render time). Pagination degrades after ~50 pages (state management, memory). 2025 recommendation: Virtualization + lazy loading + Suspense for optimal UX. TanStack Virtual + TanStack Query for data fetching. Non-virtualized optimization: Use CSS content-visibility: auto for off-screen optimization (simpler than virtualization, 40-50% improvement for <500 items).

Server Actions are async functions running on server, callable directly from client components without creating API routes. Syntax: Add 'use server' directive at top of async function. Example: async function updateUser(formData) { 'use server'; const userId = formData.get('userId'); await db.users.update(userId, {name: formData.get('name')}); revalidatePath('/users'); }. Client usage: <form action={updateUser}><input name="userId" value="123" /><input name="name" /><button>Update</button></form>. On submit, form data POSTed to server action automatically. Benefits over API routes: (1) No manual endpoint creation (/api/users/update route not needed). (2) End-to-end TypeScript - server functions typed, client calls type-checked. (3) Automatic serialization - FormData, Response, errors handled automatically. (4) Progressive enhancement - works without JavaScript (standard form POST). (5) Smaller client bundles - no fetch code, no API client libraries. Security: Runs with server permissions - validate all inputs, check auth: const session = await getSession(); if (!session) throw new Error('Unauthorized');. Only serializable arguments (no functions, classes). Framework support: Next.js 14+ (stable), Remix (future flags).

Traditional approach: Create API route (pages/api/users/update.ts), handle request parsing, validation, response. Client: onSubmit handler with fetch, loading state, error handling, FormData serialization. Server Actions approach: Single async function with 'use server', bind to form action. Comparison: Traditional: function Form() { const [loading, setLoading] = useState(false); const onSubmit = async (e) => { e.preventDefault(); setLoading(true); const res = await fetch('/api/users/update', {method:'POST', body:JSON.stringify(data)}); setLoading(false); }; return <form onSubmit={onSubmit}>...</form>; }. Server Actions: async function updateUser(data) { 'use server'; await db.update(data); } function Form() { return <form action={updateUser}>...</form>; }. React 19 hooks: useFormStatus for pending state, useFormState for optimistic updates, useActionState for progressive enhancement. Example: import {useFormStatus} from 'react-dom'; function SubmitButton() { const {pending} = useFormStatus(); return <button disabled={pending}>{pending ? 'Saving...' : 'Save'}</button>; }. Advantages: 80% less boilerplate, type-safe mutations, automatic error handling, streaming responses with Suspense. Game-changer for form-heavy apps (admin panels, CRUD applications).

Runtime CSS-in-JS (styled-components, emotion) performance costs: (1) Style generation overhead - styles computed on every render (5-15% slower re-renders). (2) Larger bundles - runtime library adds 20-50KB (styled-components: 42KB, emotion: 28KB). (3) Slower SSR - style collection and injection adds 15-30% to server render time. (4) Hydration cost - client must match server-generated styles before interactive. Benchmarks (2025): Runtime CSS-in-JS is 15-30% slower initial render vs CSS Modules, 5-10% slower re-renders. Impact grows with component count. When acceptable: Small-medium apps (<100 components), heavy dynamic styling, theming requirements. Optimization: (1) Enable babel-plugin-styled-components for SSR optimization. (2) Use shouldForwardProp to reduce prop processing overhead. (3) Hoist static styles outside components. (4) Consider Linaria (styled-component API, zero runtime). Modern CSS features (2025) reduce CSS-in-JS need: container queries, :has() selector, @layer, CSS variables, cascade layers. For new projects, prefer zero-runtime solutions or modern CSS. Edge computing: static CSS significantly faster (no runtime processing).

Zero-runtime CSS-in-JS (compile to static CSS, no runtime cost): (1) Vanilla Extract - TypeScript-first, compile-time CSS, type-safe themes, styled-components-like API. Best for: TypeScript projects, design systems. (2) Panda CSS - Zero runtime, atomic CSS, Chakra UI-like API. Best for: component libraries, utility-first fans. (3) Linaria - styled-components API, extracts to CSS files at build time. Best for: migrating from styled-components. Utility-first: (4) Tailwind CSS - JIT compiler, minimal runtime (<5KB), excellent DX with autocomplete. Best for: rapid development, design systems. **Native solutions:** (5) **CSS Modules** - built into most bundlers, zero runtime, scoped styles, fastest option. Best for: maximum performance, simple styling needs. **Performance comparison:** CSS Modules (fastest) > Zero-runtime CSS-in-JS > Tailwind > Runtime CSS-in-JS (slowest). 2025 recommendation: Vanilla Extract for component libraries, Tailwind for apps, CSS Modules for maximum performance. Migration path: styled-components → Linaria (similar API) → Vanilla Extract (better DX). React 19 improvements: better hydration for all CSS-in-JS solutions, streaming-friendly styles.

Concurrent rendering allows React to prepare multiple UI versions simultaneously and pause/resume work based on priority. Selective hydration leverages this to hydrate interactive components before non-critical content. Mechanism: wrap non-critical UI sections in <Suspense> boundaries. React streams HTML from server, begins hydrating immediately, but prioritizes visible and interactive content first (header, buy buttons) while deferring off-screen content (reviews, comments). Hydration happens in small chunks - browser can pause React's work to handle user interactions, keeping UI responsive. Implementation: <Suspense fallback={<Spinner />}><HeavyComponent /></Suspense> - HeavyComponent hydrates only when needed. Benefits over traditional SSR: (1) Users can interact with critical UI before full page hydration, (2) Main thread remains responsive during hydration, (3) React automatically prioritizes based on user interaction. Requires React 18+ with streaming SSR (Next.js 13+ App Router, Remix). Combine with React.lazy() for code splitting.

Performance improvements: (1) Faster Time to Interactive (TTI) - 40-60% reduction reported by production apps (Wix: 40% faster interaction). Users interact with critical UI immediately while non-critical content hydrates in background. (2) Non-blocking hydration - main thread remains responsive, no long tasks blocking user input. (3) Reduced total blocking time - hydration happens in small chunks (<50ms each) instead of one blocking operation. (4) Better perceived performance - interactive content (buttons, forms) usable within 1-2 seconds, even if full page takes 10+ seconds. (5) Automatic prioritization - React hydrates components user is likely to interact with first (based on viewport, user actions). Measurement: use Chrome DevTools Performance panel to measure INP (Interaction to Next Paint) - selective hydration improves INP scores by 30-50%. Critical for large SSR applications with heavy client-side interactivity. Best practices: wrap heavy components (data tables, charts, comments) in Suspense, prioritize above-the-fold content.

startTransition marks state updates as non-urgent (transitions), allowing React to defer them if higher-priority updates occur. Syntax: startTransition(() => { setState(newValue); }) or const [isPending, startTransition] = useTransition() for pending state. How it works: React splits updates into urgent (typing, clicking) and transitions (filtering, rendering). Urgent updates execute immediately. Transition updates are interruptible - React can pause mid-render to handle urgent updates, then resume transition. No manual timing control needed (unlike debounce/throttle). Implementation: function SearchResults() { const [query, setQuery] = useState(''); const [results, setResults] = useState([]); const handleChange = (e) => { setQuery(e.target.value); // Urgent update (input value); startTransition(() => { setResults(filterLargeList(e.target.value)); // Deferred update }); }; return <><input value={query} onChange={handleChange} /><Results data={results} /></>; }. Benefits: input remains responsive (60fps) while expensive filtering happens in background. Use isPending for loading indicators during transitions.

Use startTransition for: (1) Search filters with live results - typing is urgent, filtering large datasets is deferred. (2) Tab switching with heavy content - tab highlight is urgent, rendering tab content is deferred. (3) Data visualizations - user input is urgent, chart re-rendering is deferred. Advantages over debounce/throttle: (1) No artificial delays - updates start immediately but at lower priority. (2) Interruptible renders - React pauses low-priority work automatically. (3) No manual timing tuning - React handles scheduling. (4) Better UX - shows pending state, no input lag. Debounce/throttle when: (1) Rate-limiting API calls (server-side constraint). (2) Scroll/resize handlers (prevent excessive execution). (3) Auto-save functionality (batching writes). Performance: startTransition provides 2-3x better perceived responsiveness - input feels instant even with expensive updates. Don't use startTransition for: critical updates (form submission, navigation), APIs without debounce (causes excessive requests). React 19 enhances with automatic batching across transitions.

Rendering scope: SSR renders entire pages as HTML on server, sends to client, requires full hydration. RSC renders individual components on server, outputs JSON-like serialized React elements, no hydration needed for server components. Code shipping: SSR ships all component code to client (large bundles). RSC server component code never ships to client (zero bundle impact) - only client components download JavaScript. Data access: SSR components fetch data then serialize to props/HTML. RSC can directly access server resources (databases, filesystems, env variables) without serialization overhead. Rerendering: SSR only on initial page load. RSC refetch from server on rerenders, merge into client-side React tree. Hydration: SSR requires full hydration (attach event listeners, state). RSC components are static, no hydration needed. Composition: SSR all components render same way. RSC can import client components (marked with 'use client'), but client components cannot import server components. They are complementary not competitive - RSC works alongside SSR, client components are still SSR'd on initial load.

Pros: (1) Massive bundle reduction - 30-50% smaller client bundles (server components not shipped). (2) Direct server access - query databases, read files, access environment variables without API routes. (3) Better performance - faster First Contentful Paint (FCP) as server doesn't wait for data, resolves dependencies server-side. (4) No hydration overhead - server components remain static. (5) Eliminates prop drilling - fetch data where needed, not at top level. Cons: (1) Cannot use React hooks (useState, useEffect, useRef) in server components. (2) No browser APIs or event handlers ('onClick', 'onChange') in server components. (3) Framework dependency - requires Next.js 13+ App Router, Remix with future flags. (4) Learning curve - understanding server/client boundary ('use client' directive). (5) Potential over-fetching if not architected correctly. When to use: RSC for data fetching, layouts, static content, markdown rendering. Client components for interactivity, forms, animations, browser APIs. Production status: Stable in React 19 (2025), production-ready in Next.js 14+. Recommended for new applications with heavy data requirements.

Use useMemo when: (1) Computation takes >10ms (verify with React Profiler - record component, check render times). (2) Expensive operations: filtering/sorting large arrays (>1000 items), complex calculations, heavy transformations. (3) Value is dependency of other hooks (useEffect, useMemo, useCallback). Use useCallback when: (1) Passing callback to memoized child component (wrapped in React.memo). (2) Callback is dependency of useEffect/useMemo in child component. (3) Creating event handlers for items in large lists (prevents re-creating thousands of functions). When NOT to use: (1) Simple calculations (<1ms) - overhead outweighs benefits. (2) Primitive values (numbers, strings) - React compares by value anyway. (3) Local handlers not passed to children - no re-render benefit. (4) Without React.memo on children - useCallback has no effect. **Best practice:** Profile first with React DevTools Profiler. Measure don't guess. Add memoization only when profiling shows performance issues (>16ms renders causing frame drops). React 19's Compiler auto-memoizes, reducing manual usage. Rule: start without memoization, add when bottlenecks identified.

Performance costs: (1) Memory overhead - every memoized value stored in memory until component unmounts. Large apps with thousands of memoizations consume 5-10MB extra RAM. (2) Cache comparison overhead - React compares all dependencies on every render using Object.is. Simple components run 10-15% slower with unnecessary memoization. (3) Garbage collection pressure - more objects for GC to track, can cause occasional frame drops. (4) Developer cognitive load - increases code complexity, makes components harder to understand. Common mistakes: (1) Memoizing all handlers without React.memo on children (zero benefit, pure overhead). (2) Missing dependencies - stale closures, bugs. (3) Excess dependencies - cache invalidates too often, defeats purpose. (4) Memoizing object creation instead of moving outside component. When overhead exceeds benefit: Components rendering <16ms, memoizing primitive values, caching simple object creations. Measurement: Use React DevTools Profiler - compare with/without memoization. If render time difference <2ms, remove memoization. React 19 solution: React Compiler auto-memoizes optimally at build time, eliminates manual overhead and bugs.

Suspense enables declarative loading states for async operations. Mechanism: component attempts to read data during render → if data not ready, throws Promise → React catches promise, suspends component rendering, shows <Suspense fallback> → when promise resolves, React retries render with data. Implementation: React 19 use() hook: function User({id}) { const user = use(fetchUser(id)); return <div>{user.name}</div>; }. Wrap in Suspense: <Suspense fallback={<Loading />}><User id={123} /></Suspense>. When User renders and data not ready, Loading shows. When data loads, User renders. Parallel loading: Multiple Suspense boundaries load independently. <Suspense><ProductInfo /></Suspense><Suspense><Reviews /></Suspense> - both load in parallel, show individually when ready. Nested Suspense: Outer boundary shows until any child starts loading, inner boundaries show when specific sections load. Requirements: Data source must support Suspense - React Query (v5+), SWR (v2+), React 19 use() hook, or custom Suspense-enabled libraries. Doesn't work with useEffect-based fetching (use use() hook instead). React 19 enhancements: better SSR integration with streaming, improved error handling across async boundaries.

Suspense handles loading states, Error Boundaries handle error states - combine for complete async handling. Pattern: wrap Suspense in Error Boundary: <ErrorBoundary fallback={<ErrorUI />}><Suspense fallback={<Loading />}><DataComponent /></Suspense></ErrorBoundary>. Flow: (1) Component renders → throws Promise → Suspense catches → shows Loading. (2) Promise resolves → component renders with data. (3) Promise rejects → Error Boundary catches → shows ErrorUI. Error Boundary implementation: Class component with static getDerivedStateFromError() and componentDidCatch(), or use library (react-error-boundary). Example: class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError(error) { return { hasError: true }; } render() { if (this.state.hasError) return this.props.fallback; return this.props.children; } }. Granular error handling: Multiple Error Boundaries for different sections - header error doesn't break entire page. Reset errors: Provide retry button: <ErrorBoundary fallback={<div><p>Error</p><button onClick={resetError}>Retry</button></div>}>. React 19: improved error handling across async boundaries, better error messages with component stacks.

use() hook consumes resources (Promises, Context) during render - breaking traditional "hooks only in component body" rule. Syntax: const data = use(promise) or const value = use(Context). Key innovation: Can be called conditionally (unlike useState, useEffect): if (condition) { const data = use(fetchData()); }. For Promises: component reads promise → if pending, React suspends component (requires Suspense boundary) → when resolved, component rerenders with data. For Context: alternative to useContext with conditional support. Example: function Comments({postId}) { const comments = use(fetchComments(postId)); return comments.map(c => <div key={c.id}>{c.text}</div>); }. Wrap in Suspense: <Suspense fallback={<Loading />}><Comments postId={123} /></Suspense>. Promise stability: Promise must be stable across renders - wrap in useMemo or use external cache: const promise = useMemo(() => fetchComments(postId), [postId]); const comments = use(promise). Works with Server Components - server can pass promises to client components. Error handling: Combine with Error Boundary: promise rejection caught by nearest Error Boundary.

use() advantages over useEffect: (1) No loading state boilerplate - integrates with Suspense automatically, no manual isLoading state. (2) Eliminates waterfall fetches - useEffect runs after render (fetch → render → fetch), use() suspends during render (parallel fetches). (3) One less render cycle - useEffect: mount with null data → fetch → rerender with data (2 renders). use(): suspends → renders with data (1 render). (4) Conditional usage allowed - if (condition) use(promise) works, conditional useEffect is anti-pattern. (5) Server Component compatibility - use() works with RSC, useEffect doesn't. (6) Better error handling - errors bubble to Error Boundary naturally, no manual try/catch in useEffect. Performance: 30-40% faster data loading by eliminating waterfalls and extra renders. When to still use useEffect: Side effects (analytics, subscriptions, DOM manipulation), browser-only APIs, effects not tied to render. Migration: Replace useEffect(() => { fetchData().then(setData); }, []) with const data = use(fetchData()) + Suspense boundary. React 19 killer feature for data fetching - prefer use() over useEffect for async data.

React.memo is Higher-Order Component that memoizes component, preventing re-renders when props unchanged. Syntax: const MemoComponent = React.memo(Component). Default comparison: Shallow equality using Object.is() - primitives compared by value, objects/arrays compared by reference. Example: const Button = React.memo(({onClick, label}) => <button onClick={onClick}>{label}</button>). Parent rerenders → React compares old props vs new props → if same, skip child render → if different, render child. Gotcha: Object/array props must be stable (use useMemo) and function props must be stable (use useCallback), otherwise memoization breaks. Bad: <Button onClick={() => {}} /> - new function every render, always rerenders. Good: const handleClick = useCallback(() => {}, []); <Button onClick={handleClick} /> - same function reference, memoization works. Performance: 40-60% fewer renders for components with frequently-updating parents but stable props. Overhead: shallow comparison on every parent render (~0.1ms). Don't memo: fast components (<5ms render), components that rerender anyway, root components. Profile first with React DevTools.

Custom comparison: second argument to React.memo: React.memo(Component, (prevProps, nextProps) => areEqual). Return true to skip render (props equal), false to render. Use custom comparison when: (1) Large objects/arrays with deep equality - default shallow check insufficient: (prev, next) => JSON.stringify(prev.data) === JSON.stringify(next.data) (use deep-equal library for better performance). (2) Specific props should be ignored - only check subset: (prev, next) => prev.id === next.id && prev.name === next.name (ignores other props). (3) Function props semantically equal - compare function.toString() or use stable references. (4) Complex data structures - custom logic based on business rules. Gotchas: (1) Custom comparison runs on every parent render - must be fast (<1ms), slow comparisons worse than re-rendering. (2) Avoid JSON.stringify for large objects - O(n) complexity, use shallow checks or libraries (fast-deep-equal, lodash.isEqual). (3) Inverse logic - returns true to skip (unlike shouldComponentUpdate). When not to use: Simple props, frequently changing props, comparisons slower than component render. React 19 Compiler makes custom comparisons rarely needed.

Component composition (passing components as props/children) often outperforms prop drilling for non-shared state. Composition example: <Layout sidebar={<UserSidebar user={user} />}> instead of drilling user through Layout → Sidebar → UserSidebar. Performance benefits: (1) Granular re-renders - only affected components rerender. When user changes, only UserSidebar rerenders, not Layout or intermediate components. (2) No intermediate processing - Layout doesn't receive/forward user prop, saves memory and CPU. (3) Better code splitting - components bundled independently. (4) 20-30% faster than deep prop drilling (5+ levels) in benchmarks. Composition pattern: function Page() { const user = useUser(); return <Layout sidebar={<UserSidebar user={user} />} header={<Header user={user} />}><Content /></Layout>; }. Layout receives rendered components, not props to process. When to use: Component trees (layouts, pages), when data needed by specific descendants, when multiple props flow together. When NOT to use: True global state (theme, auth), 1-2 levels (prop drilling simpler), data needed by many siblings (context better).

Context trade-offs: Solves prop drilling but causes all consumers to re-render on context value changes. Example: <ThemeContext.Provider value={{theme, setTheme}}> - every component using useContext(ThemeContext) rerenders when theme OR setTheme changes, even if they only use theme. Performance comparison: Context is 10-15% slower than composition but cleaner than deep prop drilling (5+ levels). Prop drilling (1-2 levels): fastest, simplest. Composition: 20-30% faster than context for local state. Context: best for true global state. Optimization strategies: (1) Split contexts - separate by update frequency: <ThemeContext><UserContext> - theme changes don't rerender user consumers. (2) Memoize context value: const value = useMemo(() => ({theme, setTheme}), [theme]) - prevents object recreation. (3) Context selectors - use-context-selector library: const theme = useContextSelector(ThemeContext, ctx => ctx.theme) - only rerenders when theme changes. (4) Combine with React.memo - memo'd components below context don't cascade rerender. Best practice 2025: Composition for component trees, context for global state (theme, auth, i18n), state management libraries (Zustand, Jotai) for complex shared state.

React 18 batching: Automatic for synchronous code in React event handlers. Multiple setState calls in onClick batch into single render. NOT batched: async callbacks (setTimeout, promises, native events). Example: function handleClick() { setState1(x); setTimeout(() => setState2(y)); } - React 18 causes 2 renders (setState1 batched, setState2 separate). React 19 enhancement: Extends automatic batching to ALL contexts - promises, async/await, setTimeout, native event listeners, queueMicrotask. Same example: async function handleClick() { setState1(x); await fetch('/api'); setState2(y); setState3(z); } - React 19 batches all 3 updates into single render. Benefits: (1) 20-30% fewer renders in async-heavy apps (data fetching, animations). (2) Better performance - less DOM reconciliation, fewer layout calculations. (3) Cleaner code - no manual unstable_batchedUpdates() wrapper. (4) Automatic optimization - developers don't think about batching. Edge case: Need separate renders for animations/transitions? Use flushSync() to opt out: setState1(x); flushSync(() => setState2(y)); - forces separate renders. Free performance win for apps upgrading to React 19.

Implications for developers: (1) Fewer renders automatically - existing async code gets free performance boost without changes. (2) Possible breaking changes - rare, but code relying on multiple renders for side effects may break. Check components with useEffect watching state updated in async code. (3) Timing changes - state updates complete faster (single batch vs multiple renders), may affect animations or transitions expecting separate renders. (4) Simplified patterns - remove manual batching workarounds: delete unstable_batchedUpdates(), ReactDOM.flushSync() wrappers (unless specifically needing separate renders). Testing implications: Integration tests expecting multiple renders need updates. Use waitFor with specific assertions rather than counting renders. Performance wins: Async-heavy apps (data dashboards, real-time features) see 20-30% render reduction. Example: form with async validation - onChange + validation + setState all batch into one render. Combine with transitions: Batching within startTransition remains interruptible - React can pause batched low-priority updates for urgent updates. Opt-out when needed: flushSync(() => setState(x)) forces immediate separate render for animations, measurements requiring layout calculations.

React Compiler (formerly React Forget) is automatic memoization compiler that analyzes components at build time and inserts optimal memoization without manual useMemo/useCallback/React.memo. How it works: (1) Analyzes component data flow during build (Babel/webpack plugin). (2) Identifies expensive computations and stable values. (3) Auto-inserts memoization based on dependency analysis. (4) Optimizes better than manual memoization (compiler sees full data flow). Example: function Component({items}) { const filtered = items.filter(i => i.active); const sorted = filtered.sort((a,b) => a.value - b.value); return sorted.map(i => <div key={i.id}>{i.name}</div>); } - Compiler auto-memoizes filtered and sorted based on items dependency. Integration: Opt-in via Babel plugin, per-component with 'use compiler' directive, or project-wide. Compatible with React 17, 18, 19. Production status: Production-ready in React 19 (2025), available as experimental plugin for React 18. Limitations: (1) Requires build step (Babel/webpack). (2) Some edge cases need manual optimization. (3) Not compatible with class components. Performance: 30% average improvement from optimal memoization, eliminates dependency bugs.

Code changes: (1) Remove manual memoization - delete most useMemo, useCallback, React.memo (compiler handles automatically). (2) Write readable code - focus on clarity over performance, compiler optimizes. (3) Eliminate dependency arrays - no more missing dependency bugs or lint warnings. (4) Smaller bundles - less memoization boilerplate code. Development workflow: (1) Enable compiler incrementally - add 'use compiler' per component or directory. (2) Profile to verify - use React DevTools to confirm compiler optimizations. (3) Rare manual optimization - only for dynamic/runtime-specific cases compiler can't analyze. Migration strategy: (1) New projects: enable compiler from start. (2) Existing projects: enable gradually (per-route, per-feature), remove manual memoization after verification. (3) Keep React.memo for third-party components or complex custom comparisons. Future (React 20+): Compiler enabled by default, manual memoization becomes rare exception. Benefits: Focus on features not performance micro-optimizations, fewer bugs (no stale closures from wrong dependencies), better performance (optimal memoization), cleaner codebase. Adoption in 2025: production-ready, major frameworks (Next.js, Remix) adding compiler support.

Virtualization (windowing) - best solution for 1000+ items: render only visible items in viewport plus small buffer. Libraries: (1) TanStack Virtual (recommended 2025) - 4KB, framework-agnostic, supports variable heights, horizontal/vertical, grid layouts. (2) react-window (lightweight, 3KB) - simple API, fixed heights, battle-tested. (3) react-virtuoso - handles variable heights automatically, simpler API. Implementation: import { useVirtualizer } from '@tanstack/react-virtual'; function List({items}) { const parentRef = useRef(); const virtualizer = useVirtualizer({count: items.length, getScrollElement: () => parentRef.current, estimateSize: () => 35}); return <div ref={parentRef} style={{height:'400px',overflow:'auto'}}>{virtualizer.getVirtualItems().map(item => <div key={item.index} style={{height:item.size}}>{items[item.index].name}</div>)}</div>; }. Performance: Constant memory usage regardless of list size, 60fps scrolling, 95% memory reduction (1000 items → render ~20). Considerations: Items not in DOM (SEO issues - use pagination for public content), complex initial setup, accessibility challenges (ensure keyboard navigation, screen reader support). Combine with lazy loading for data fetching.

Use virtualization when: (1) 1000+ items need to be scrollable in single view (logs, chat history, data tables). (2) Uniform or calculable item heights. (3) SEO not critical (internal tools, dashboards). (4) User needs smooth infinite scrolling experience. (5) Performance critical (maintaining 60fps). Use pagination when: (1) SEO-critical content (product listings, blog posts, search results). (2) Variable, unpredictable item heights (complex cards, images). (3) Simpler implementation acceptable. (4) Users prefer discrete pages for navigation/bookmarking. (5) Server-side filtering/sorting needed. Hybrid approach: Infinite scroll with virtualization - best of both worlds. Load pages on demand, virtualize visible items: react-virtuoso with endReached callback. Performance comparison: Virtualization handles millions of items (constant O(1) render time). Pagination degrades after ~50 pages (state management, memory). 2025 recommendation: Virtualization + lazy loading + Suspense for optimal UX. TanStack Virtual + TanStack Query for data fetching. Non-virtualized optimization: Use CSS content-visibility: auto for off-screen optimization (simpler than virtualization, 40-50% improvement for <500 items).

Server Actions are async functions running on server, callable directly from client components without creating API routes. Syntax: Add 'use server' directive at top of async function. Example: async function updateUser(formData) { 'use server'; const userId = formData.get('userId'); await db.users.update(userId, {name: formData.get('name')}); revalidatePath('/users'); }. Client usage: <form action={updateUser}><input name="userId" value="123" /><input name="name" /><button>Update</button></form>. On submit, form data POSTed to server action automatically. Benefits over API routes: (1) No manual endpoint creation (/api/users/update route not needed). (2) End-to-end TypeScript - server functions typed, client calls type-checked. (3) Automatic serialization - FormData, Response, errors handled automatically. (4) Progressive enhancement - works without JavaScript (standard form POST). (5) Smaller client bundles - no fetch code, no API client libraries. Security: Runs with server permissions - validate all inputs, check auth: const session = await getSession(); if (!session) throw new Error('Unauthorized');. Only serializable arguments (no functions, classes). Framework support: Next.js 14+ (stable), Remix (future flags).

Traditional approach: Create API route (pages/api/users/update.ts), handle request parsing, validation, response. Client: onSubmit handler with fetch, loading state, error handling, FormData serialization. Server Actions approach: Single async function with 'use server', bind to form action. Comparison: Traditional: function Form() { const [loading, setLoading] = useState(false); const onSubmit = async (e) => { e.preventDefault(); setLoading(true); const res = await fetch('/api/users/update', {method:'POST', body:JSON.stringify(data)}); setLoading(false); }; return <form onSubmit={onSubmit}>...</form>; }. Server Actions: async function updateUser(data) { 'use server'; await db.update(data); } function Form() { return <form action={updateUser}>...</form>; }. React 19 hooks: useFormStatus for pending state, useFormState for optimistic updates, useActionState for progressive enhancement. Example: import {useFormStatus} from 'react-dom'; function SubmitButton() { const {pending} = useFormStatus(); return <button disabled={pending}>{pending ? 'Saving...' : 'Save'}</button>; }. Advantages: 80% less boilerplate, type-safe mutations, automatic error handling, streaming responses with Suspense. Game-changer for form-heavy apps (admin panels, CRUD applications).

Runtime CSS-in-JS (styled-components, emotion) performance costs: (1) Style generation overhead - styles computed on every render (5-15% slower re-renders). (2) Larger bundles - runtime library adds 20-50KB (styled-components: 42KB, emotion: 28KB). (3) Slower SSR - style collection and injection adds 15-30% to server render time. (4) Hydration cost - client must match server-generated styles before interactive. Benchmarks (2025): Runtime CSS-in-JS is 15-30% slower initial render vs CSS Modules, 5-10% slower re-renders. Impact grows with component count. When acceptable: Small-medium apps (<100 components), heavy dynamic styling, theming requirements. Optimization: (1) Enable babel-plugin-styled-components for SSR optimization. (2) Use shouldForwardProp to reduce prop processing overhead. (3) Hoist static styles outside components. (4) Consider Linaria (styled-component API, zero runtime). Modern CSS features (2025) reduce CSS-in-JS need: container queries, :has() selector, @layer, CSS variables, cascade layers. For new projects, prefer zero-runtime solutions or modern CSS. Edge computing: static CSS significantly faster (no runtime processing).

Zero-runtime CSS-in-JS (compile to static CSS, no runtime cost): (1) Vanilla Extract - TypeScript-first, compile-time CSS, type-safe themes, styled-components-like API. Best for: TypeScript projects, design systems. (2) Panda CSS - Zero runtime, atomic CSS, Chakra UI-like API. Best for: component libraries, utility-first fans. (3) Linaria - styled-components API, extracts to CSS files at build time. Best for: migrating from styled-components. Utility-first: (4) Tailwind CSS - JIT compiler, minimal runtime (<5KB), excellent DX with autocomplete. Best for: rapid development, design systems. **Native solutions:** (5) **CSS Modules** - built into most bundlers, zero runtime, scoped styles, fastest option. Best for: maximum performance, simple styling needs. **Performance comparison:** CSS Modules (fastest) > Zero-runtime CSS-in-JS > Tailwind > Runtime CSS-in-JS (slowest). 2025 recommendation: Vanilla Extract for component libraries, Tailwind for apps, CSS Modules for maximum performance. Migration path: styled-components → Linaria (similar API) → Vanilla Extract (better DX). React 19 improvements: better hydration for all CSS-in-JS solutions, streaming-friendly styles.