React Developer Interview Prep Guide

Server Components render on the server with zero JavaScript sent to the client, can directly access databases and file systems, and cannot use hooks or browser APIs. Client components handle interactivity, state, and effects. Use the "use client" directive only when needed. Discuss the performance benefits of reducing client bundle size and how streaming with Suspense enhances perceived performance.

Use useState for the debounced value, useEffect with setTimeout for the delay, and useRef for the timeout ID so the cancel function can access it. Return [debouncedValue, cancel]. Discuss the cleanup function in useEffect that clears the timeout on unmount or value change. Test edge cases: rapid value changes, unmounting during debounce, and cancel being called after the value has already propagated.

Cover CRDT or OT for conflict resolution, WebSocket connection management with reconnection logic, optimistic UI updates, cursor presence awareness, and undo/redo with operational history. Discuss component structure: EditorProvider for state, ContentEditable or ProseMirror for the editing surface, and how to split the document into chunks for efficient rendering. Address performance with virtualization for long documents.

React Compiler automatically memoizes components and values, eliminating the need for manual useMemo, useCallback, and React.memo in most cases. It performs static analysis at build time to determine optimal memoization boundaries. Discuss how this reduces bugs from missing dependencies in dependency arrays and simplifies code, while noting that you still need to understand re-rendering for debugging.

Use React DevTools Profiler to identify which components re-render and why. Check for: missing memoization, new object/array references created in render, context providers with frequently changing values, and state updates that should be batched. Apply targeted fixes: extract expensive components, use useMemo for computed values, split contexts to reduce blast radius, and consider state management outside React (Zustand, Jotai).

useEffect + fetch is the basic approach but lacks caching, deduplication, and retry logic. React Query/SWR add caching, background refetching, optimistic updates, and pagination support. Server Components with async/await run on the server, eliminating waterfalls and client-side loading states. Choose based on whether data is static (Server Components), needs real-time updates (React Query), or is simple one-off fetching (useEffect for prototypes).

Describe a specific migration: class components to hooks, CRA to Next.js, Redux to Zustand, or Pages Router to App Router. Explain your incremental approach, how you maintained backward compatibility during the migration, what testing strategy you used, and how you measured success. Include specific metrics: bundle size reduction, performance improvements, or developer velocity gains.

Explain the core concept: only render visible items plus a buffer. Use a container with the total calculated height and position items absolutely based on their offset. Track scroll position with onScroll, calculate visible range using binary search over item offsets, and measure actual item heights after render. Discuss trade-offs between libraries like react-window (fixed heights only) and @tanstack/virtual (variable heights). Mention ResizeObserver for dynamic height measurement.