React Interview Questions and Answers
100 React interview questions across 10 topics: React Core & Virtual DOM, Hooks Fundamentals, Advanced Hooks & Custom Hooks, State Management & Context, Routing & Single Page Apps, Performance Optimization & Profiling, SSR, SSG & Server Components, Forms & Data Handling, Testing React Components, and Architecture, Component Patterns & Best Practices. They cover Mid-level, Junior, and Senior levels, and every question has a short answer to give in the interview, a deeper explanation, common mistakes, and links to official documentation with a last-reviewed date.
Topics
React Core & Virtual DOM
10 questions
Hooks Fundamentals
10 questions
Advanced Hooks & Custom Hooks
10 questions
State Management & Context
10 questions
Routing & Single Page Apps
10 questions
Performance Optimization & Profiling
10 questions
SSR, SSG & Server Components
10 questions
Forms & Data Handling
10 questions
Testing React Components
10 questions
Architecture, Component Patterns & Best Practices
10 questions
React Core & Virtual DOM Interview Questions (React)
- What is the Virtual DOM in React, and how does the Reconciliation (Diffing) algorithm work?
- Why are Keys important when rendering lists, and what are the risks of using the array index as a Key?
- What is JSX, and what happens to it during compilation?
- What are Pure Components and purity in React functions (Pure Functions)?
- What is the role of React Fiber, and how do Render Phase and Commit Phase differ?
- How do Event Pooling and the SyntheticEvent system work in React?
- What are Portals in React, and when should you use them?
- What is StrictMode, and what checks does it perform in development?
- What is the Lifting State Up principle, and when should you use it?
- What are Error Boundaries, and how do they handle unexpected errors in a component tree?
Hooks Fundamentals Interview Questions (React)
- What are the Rules of Hooks, and why does React enforce them strictly?
- What is the difference between passing a direct value to setState and passing an updater function (Updater Function)?
- What is the lifecycle of useEffect, and how does its Cleanup Function work?
- What are Stale Closures with useEffect and useCallback, and how do you address them?
- When should you use useRef, and what is its essential difference from useState?
- How do useMemo and useCallback differ, and when can they harm performance?
- What is useReducer, and when should you choose it instead of useState?
- How do useEffect and useLayoutEffect differ in when they run relative to screen painting?
- What is useContext, and what happens to consumers when a Context Provider value changes?
- What is useImperativeHandle, and how do you use it with forwardRef to control a child component's interface?
Advanced Hooks & Custom Hooks Interview Questions (React)
- How do you build a Custom Hook for LocalStorage with synchronization across browser windows?
- What is useSyncExternalStore for, and why was it introduced in React 18 to solve Tearing?
- What is useTransition, and how does it improve UI responsiveness during heavy operations?
- What is useDeferredValue, and how does it differ from traditional Debounce or Throttle?
- What is useId, and why is it needed to create unique, accessible IDs in SSR?
- How do you build a Custom Hook to debounce values or function calls and cancel earlier operations?
- What is useInsertionEffect, and what very unusual cases require it?
- How do you build a Custom Hook for Infinite Scroll with IntersectionObserver?
- What are the new React 19 Action Hooks (such as useActionState, useFormStatus, and useOptimistic)?
- How do you handle the Hook Factory problem and avoid recreating functions with useEffectEvent?
State Management & Context Interview Questions (React)
- What is the essential difference between Server State and Client State, and when should you stop using Redux for both?
- How do you prevent Re-render Hell when using React Context in medium-sized applications?
- What is Atomic State in libraries such as Jotai (and archived Recoil), and how does it compare with Redux's Single Store pattern?
- How does Redux Toolkit (RTK) work, and what did it improve over classic Redux?
- What is Zustand, and why is it popular as a lightweight, fast alternative to Redux?
- What is Prop Drilling, and what are the best alternatives?
- What are the Immutability rules in React state management, and why is Direct Mutation prohibited?
- How do you manage Optimistic UI Updates and handle failures and Rollback?
- When should you calculate Derived State instead of storing it in a separate useState?
- How do you store and synchronize UI state in the page URL (URL Search Params as State)?
Routing & Single Page Apps Interview Questions (React)
- What is the difference between Client-Side Routing and Server-Side Routing in web applications?
- How do Data Loading and Loaders work in recent React Router releases (v6.4+ Data APIs)?
- What are Nested Routes, and how do you use <Outlet /> to structure interfaces?
- How do you implement Protected Routes & Auth Guards and redirect an unauthorized user?
- What is router Lazy Loading, and how does it work with React.lazy and Suspense for Code Splitting?
- How do you handle routes that do not exist (404 Not Found) and custom error pages?
- How do you navigate programmatically and work with route parameters (Params)?
- What strategies reset Scroll to the top of the page after a route change (Scroll Restoration)?
- How do MemoryRouter, BrowserRouter, and HashRouter differ, and when should you use each?
- How does the View Transitions API create smooth transitions between pages during routing?
Performance Optimization & Profiling Interview Questions (React)
- How do you identify and fix Unnecessary Re-renders with the React DevTools Profiler?
- What is Virtualization (Windowing), and how do you use TanStack Virtual to display huge lists?
- What does React.memo cost, and why should you not use it by default on every component?
- How does dynamic Code Splitting affect Core Web Vitals (LCP, FID/INP, CLS)?
- What is Layout Thrashing, and how do you avoid it in React components?
- How do you use Web Workers to move heavy calculations out of the Main Thread in React applications?
- What image-loading techniques prevent Cumulative Layout Shift (CLS) in React applications?
- How do you find common Memory Leaks in React applications with Chrome's Memory Tab?
- How do you avoid creating new objects and references (Inline Objects & Arrays) in a component body during Render?
- What are the benefits and challenges of Transitions for splitting work in React 18?
SSR, SSG & Server Components Interview Questions (React)
- How do CSR, SSR, SSG, and ISR differ in modern React applications?
- What is Hydration, and what commonly causes a Hydration Mismatch?
- What are React Server Components (RSC), and how do they fundamentally differ from SSR?
- What is the "use client" directive, and when should it be used in an RSC architecture?
- What is Streaming SSR, and how does renderToPipeableStream work in Node.js?
- How does Suspense handle Data Fetching and nested loading states?
- What is the new use() function in React 19, and how does it work with Promises and Context?
- How do you manage SEO and metadata tags (Metadata & Open Graph) in React applications?
- What is Islands Architecture, and how does it compare with traditional React Hydration?
- How do you handle cookies, sessions, and caching in a React Edge Runtime environment?
Forms & Data Handling Interview Questions (React)
- How do Controlled Components and Uncontrolled Components differ, and when should you prefer each?
- Why can React Hook Form (RHF) perform better than traditional Formik forms?
- How do you integrate Zod with React forms for End-to-End Type-Safety?
- How do you handle multiple file uploads and upload progress indicators in React forms?
- How do you manage Dynamic Field Arrays whose number of fields changes in a form?
- What are Server Actions in React 19, and how do they simplify form submission without JavaScript?
- How do you automatically save form drafts (Auto-save) to prevent users from losing their input?
- What accessibility standards (Form Accessibility - a11y) should web forms follow?
- How do you prevent double clicks and repeated form submissions (Double Submissions)?
- How do you build a Multi-step Wizard Form while preserving data when a user goes back?
Testing React Components Interview Questions (React)
- What is the philosophy of React Testing Library (RTL), and how does it differ from the old Enzyme tests?
- How do getBy, queryBy, and findBy queries differ in React Testing Library?
- Why prefer userEvent over fireEvent when testing user interactions?
- What is Mock Service Worker (MSW), and why is it the gold standard for testing API requests in React?
- What is the common "act(...) warning", why does it appear, and how should you fix it?
- How do you test a Custom Hook separately with RTL's renderHook?
- How do Component Tests differ from Playwright end-to-end (E2E) tests?
- How do you test components that depend on React Context without running the entire application?
- What is Snapshot Testing, and what are the risks of overusing it?
- How do you test accessibility in React components with axe-core?
Architecture, Component Patterns & Best Practices Interview Questions (React)
- What is the Compound Components pattern, and how does it build flexible, complex UI components?
- How do Higher-Order Components (HOC) differ from Custom Hooks, and why did Hooks replace HOCs?
- What is Headless UI, and why is it a leading pattern in modern Design Systems?
- How do you apply Single Responsibility and separate Container and Presentational components?
- What is Feature-Sliced Design (FSD), and how does it organize large Enterprise React projects?
- How do you build a complete Design System that supports Dark Mode and multiple themes (Theming)?
- What is the Render Props pattern, and how is it used today?
- How do you handle Circular Dependencies in large React projects?
- How do you implement Micro-frontends in React with Webpack Module Federation?
- How do you apply Clean Code principles to organize React folders and files?