React Interview Questions for Experienced Developers
The harder React questions asked of developers with a few years of experience: rendering internals, concurrency, state architecture, performance and server rendering. Each has a short answer and links to a full lesson.
01 · Core React Hooks: State, Synchronization, and Refs · Hard
Effect Cleanups & Race Conditions
Race conditions occur when asynchronous requests resolve out of order (e.g., Query A sent before Query B, but B finishes before A).
Full answer, traps and step-by-step trace02 · Advanced Hooks, Referential Equality, and Stores · Hard
useContext Internals & Re-Render Cascades
useContext subscribes components to a Context Provider. When the provider value changes, all subscribing consumers re-render unconditionally, even if wrapped in React.memo.
Full answer, traps and step-by-step trace03 · Advanced Hooks, Referential Equality, and Stores · Hard
useLayoutEffect vs useEffect vs useInsertionEffect
useInsertionEffect runs synchronously before DOM mutations (for CSS-in-JS injection), useLayoutEffect runs synchronously after DOM mutations but before the browser paints (to measure layout and prevent visual flicker), and useEffect runs asynchronously after…
Full answer, traps and step-by-step trace04 · Advanced Hooks, Referential Equality, and Stores · Hard
useSyncExternalStore: Tearing Prevention
useSyncExternalStore safely subscribes components to external non-React state stores (browser APIs, Redux, Zustand) without concurrent tearing.
Full answer, traps and step-by-step trace05 · React Internals: Fiber Architecture and Reconciliation · Hard
Fiber Node Architecture & Work Loop
React Fiber is an internal reconciler data structure that replaces the recursive call stack with a singly linked list (child, sibling, return).
Full answer, traps and step-by-step trace06 · React Internals: Fiber Architecture and Reconciliation · Hard
Render Phase vs Commit Phase Mechanics
The Render Phase is asynchronous and pure: React invokes component functions and diffs Fiber trees without touching the DOM, and work can be paused or discarded.
Full answer, traps and step-by-step trace07 · Performance Engineering, Profiling, and Virtualization · Hard
List Virtualization & Windowing Strategies
List virtualization (windowing) renders only the subset of items currently visible in the browser viewport (plus a small overscan buffer), recycling DOM nodes as the user scrolls. It keeps DOM node counts constant (e.g.
Full answer, traps and step-by-step trace08 · Performance Engineering, Profiling, and Virtualization · Hard
React DevTools Profiler: Flamegraph Analysis
The React DevTools Profiler records render passes to diagnose performance bottlenecks.
Full answer, traps and step-by-step trace09 · Concurrent Rendering, Priority Lanes, and React 19 · Hard
Concurrent React: Interruptible Rendering
Concurrent React is an internal mechanism that makes rendering interruptible without blocking the main thread.
Full answer, traps and step-by-step trace10 · Concurrent Rendering, Priority Lanes, and React 19 · Hard
React 19 use() API: Promises, Context & Suspense
The React 19 use() API is a versatile runtime function that unwraps Promises and reads Context directly inside component rendering.
Full answer, traps and step-by-step trace11 · Concurrent Rendering, Priority Lanes, and React 19 · Hard
React 19 Actions: useActionState & useOptimistic
React 19 Actions handle async transitions and form submissions automatically. useActionState manages action state, pending status, and return values, while useOptimistic provides instant UI feedback that automatically rolls back if the server action fails.
Full answer, traps and step-by-step trace12 · Form Architecture, Modern FormData, and Validation · Hard
Complex Input Patterns: Files & Input Masking
Complex inputs require specialized DOM handling: file inputs (<input type="file">) are strictly uncontrolled and managed via refs and FormData, while masked inputs (phone numbers, credit cards) require tracking cursor selection ranges to prevent the caret…
Full answer, traps and step-by-step trace13 · State Architecture, Store Subscriptions, and Server Cache · Hard
Redux Toolkit (RTK): Slices & Normalized State Architecture
Redux Toolkit modernizes Redux by abstracting boilerplate with createSlice, integrating Immer for safe mutable-style draft updates, and providing createEntityAdapter to maintain normalized O(1) relational state by ID, avoiding nested array manipulation.
Full answer, traps and step-by-step trace14 · Advanced Component Design Patterns and Error Boundaries · Hard
Polymorphic Components & The "as" Prop Pattern
A Polymorphic Component is a dynamic UI primitive that can render as different HTML tags or React components using an "as" prop, while preserving native semantic HTML attributes, accessibility, and visual styling without code duplication.
Full answer, traps and step-by-step trace15 · Type-Safe React: Components, Generics, and Hooks · Hard
Generic Components: Type-Safe Tables, Selects & Lists
Generic React components accept TypeScript type parameters `<T>`, enabling reusable UI primitives like Tables, Selects, and Virtual Lists to enforce full type safety on data items, callbacks, and custom cell renderers without losing type inference.
Full answer, traps and step-by-step trace16 · Type-Safe React: Components, Generics, and Hooks · Hard
Advanced TypeScript: Typing Polymorphic "as" Props
Typing polymorphic components requires advanced TypeScript generics that map the "as" prop to React.ElementType, combine custom props with React.ComponentPropsWithoutRef<E>, and omit prop collisions to ensure accurate HTML attribute validation and ref…
Full answer, traps and step-by-step trace17 · Frontend Security, Taint APIs, and Web Accessibility · Hard
React 19 Security: Server Action Taint APIs
React 19 introduces experimental Taint APIs (experimental_taintObjectReference and experimental_taintUniqueValue) in Server Components to explicitly mark sensitive data like user passwords, tokens, or private keys, causing React to throw a build-time or…
Full answer, traps and step-by-step trace18 · Frontend Security, Taint APIs, and Web Accessibility · Hard
Accessible Modal Dialog with Focus Trapping & Portals
An accessible Modal Dialog must be rendered into a React Portal, apply role="dialog" and aria-modal="true", trap keyboard Tab focus strictly within the dialog, close on Escape key or backdrop click, prevent background scrolling, and restore focus to the…
Full answer, traps and step-by-step trace19 · Server-Side Rendering, Hydration, and Server Components · Hard
Hydration Mismatch Errors: Diagnosis, Prevention & Fixes
Hydration mismatch occurs when server-rendered HTML differs from the initial client render tree, often caused by browser APIs, dates, or invalid HTML nesting.
Full answer, traps and step-by-step trace20 · Server-Side Rendering, Hydration, and Server Components · Hard
React Server Components (RSC): Architecture & Mental Model
React Server Components (RSC) execute exclusively on the server with zero client JavaScript bundle cost and direct database access. Client Components ("use client") provide interactivity.
Full answer, traps and step-by-step trace21 · Server-Side Rendering, Hydration, and Server Components · Hard
Streaming SSR with Suspense & Selective Hydration
React 18 Streaming SSR uses renderToPipeableStream and Suspense boundaries to break HTML generation into streams, flushing shells immediately while slow queries stream in later.
Full answer, traps and step-by-step trace22 · Unit Testing, Async Mocking, and Debugging Workflows · Hard
Debugging React Memory Leaks & Retained Closures
Memory leaks in React occur when unmounted components leave active references that prevent garbage collection.
Full answer, traps and step-by-step trace23 · Live Machine Coding Challenges and Custom Hooks · Hard
Machine Coding: Production Modal Dialog Component
A production Modal Dialog uses createPortal to escape parent stacking contexts, traps keyboard Tab focus, dismisses on Escape key or backdrop click, restores focus to the triggering element on unmount, and locks background document scrolling.
Full answer, traps and step-by-step trace24 · Live Machine Coding Challenges and Custom Hooks · Hard
Machine Coding: Autocomplete Typeahead Search
A production Autocomplete Typeahead features debounced asynchronous fetching, in-memory caching to eliminate duplicate API requests, full keyboard navigation (ArrowDown, ArrowUp, Enter, Escape), WAI-ARIA combobox accessibility, and click-outside dismissal…
Full answer, traps and step-by-step trace25 · Live Machine Coding Challenges and Custom Hooks · Hard
Machine Coding: Multi-Step Wizard with Step Validation
A production Multi-Step Form Wizard manages step navigation as a finite state machine, persists accumulated form data across steps, isolates field validation per step, supports backward navigation without data loss, and submits a consolidated payload upon…
Full answer, traps and step-by-step trace
Applying for the role too? React developer resume examples