Top 20 React Interview Questions at FAANG Companies (2026)

If you're preparing for a frontend or full-stack interview at Google, Meta, Amazon, Apple, Netflix, or Microsoft, React is almost certainly on the menu. These companies don't just ask you to recite API docs — they probe your understanding of why React works the way it does, how to optimize real-world applications, and whether you can architect production-grade systems.

We compiled these 20 questions from real interview experiences shared by engineers who've recently gone through the process at FAANG companies. Each question includes what the interviewer is really looking for and a concise answer framework.

React Hooks Deep Dive

1. Explain the rules of hooks and why they exist.

React hooks must be called at the top level of a function component or a custom hook — never inside loops, conditions, or nested functions. This rule exists because React relies on the call order of hooks to associate state with the correct hook invocation between re-renders. If the order changes conditionally, React loses track of which state belongs to which useState or useEffect call.

Interviewers love this question because it reveals whether you understand React's internal linked-list based fiber architecture, or if you just memorize rules without understanding them.

2. What's the difference between useEffect and useLayoutEffect?

Both run after render, but useLayoutEffect fires synchronously after all DOM mutations and before the browser paints to the screen. This makes it essential for measuring DOM elements or preventing visual flicker — for example, calculating tooltip positions. useEffect, on the other hand, is deferred and non-blocking, making it the right choice for data fetching, subscriptions, and most side effects.

3. How do you create a custom hook and when would you use one?

A custom hook is any JavaScript function whose name starts with use and that calls other hooks. You extract logic into a custom hook when multiple components share the same stateful behavior — like form validation, API polling, or authentication state. The key insight is that custom hooks share logic, not state. Each component calling the hook gets its own independent copy of the state.

4. What is useRef really for, beyond DOM access?

While useRef is commonly used to access DOM nodes, its true purpose is to hold a mutable value that persists across renders without causing re-renders. This is useful for storing interval IDs, previous state values, tracking whether a component is mounted, or holding any instance variable that doesn't need to trigger UI updates.

Performance Optimization

5. When and why would you use React.memo?

React.memo is a higher-order component that skips re-rendering when props haven't changed (shallow comparison by default). Use it when a component receives the same props frequently but its parent re-renders often — like an item in a large list. The key caveat: if props include objects or functions created inline, they'll be new references every render, making memo useless unless you also use useMemo and useCallback.

6. Explain React's reconciliation algorithm.

React's reconciliation (diffing) algorithm compares two virtual DOM trees to determine the minimum set of DOM changes. It uses two heuristics: elements of different types produce entirely different trees, and the key prop hints at which child elements are stable across renders. This is why keys are critical in lists — without stable keys, React may destroy and recreate elements unnecessarily, losing component state and hurting performance.

7. What causes unnecessary re-renders and how do you debug them?

Common causes include: creating new object/array references in render, passing inline functions as props, context value changes affecting all consumers, and state updates at too high a level in the component tree. Debug using React DevTools Profiler, the "Highlight updates" feature, or the why-did-you-render library. The fix usually involves memoization, moving state down, or splitting contexts.

8. How does code splitting work in React, and what's React.lazy?

Code splitting breaks your bundle into smaller chunks loaded on demand. React.lazy lets you define a component that's loaded dynamically via import(). Wrap it in Suspense to show a fallback while loading. Route-based splitting is the most impactful strategy — load each page's code only when the user navigates there.

State Management

9. When would you choose useReducer over useState?

Use useReducer when state logic is complex — multiple sub-values, state transitions that depend on previous state, or when the next state depends on an action type. It also pairs well with context for lightweight state management, and makes state transitions more predictable and testable because the reducer is a pure function.

10. What are the pitfalls of React Context for global state?

Context triggers re-renders in every consuming component when the value changes, even if a component only reads a slice of the value. For frequently-changing state (like mouse position or form input), this is catastrophic for performance. Solutions include splitting context into multiple smaller contexts, using memoization, or reaching for a dedicated state library like Zustand or Jotai that offers fine-grained subscriptions.

11. How do you share state between sibling components?

Lift state up to the closest common parent and pass it down via props. For deeply nested trees, use Context to avoid prop drilling. For cross-cutting concerns that many components need, consider a global store. The decision depends on how many components need the state, how frequently it changes, and how deep the component tree is.

Advanced Patterns & Architecture

12. Explain the compound component pattern.

Compound components let you build flexible, declarative APIs like <Select><Option /></Select>. The parent manages shared state and passes it to children implicitly via Context, while each child controls its own rendering. This pattern reduces prop drilling, provides a clean API surface, and lets consumers compose components freely. FAANG interviewers frequently ask you to design a component library using this pattern.

13. What is the render props pattern, and has it been replaced by hooks?

Render props pass a function as a prop (or children) to share behavior between components. While hooks have largely replaced render props for sharing stateful logic, render props are still valuable when the shared logic needs to influence what gets rendered — like a headless UI library that provides behavior without markup.

14. How do error boundaries work and what are their limitations?

Error boundaries are class components that catch JavaScript errors in their child component tree during rendering, lifecycle methods, and constructors. They display a fallback UI instead of crashing the whole app. Key limitation: they don't catch errors in event handlers, async code, server-side rendering, or in the error boundary itself. For event handler errors, use try/catch.

React 19, Server Components & The Cutting Edge

15. What are React Server Components and why do they matter?

Server Components render on the server and send serialized UI to the client — no JavaScript bundle for that component ships to the browser. This dramatically reduces bundle size and enables direct database/filesystem access from components. Client components still handle interactivity. The mental model is: server components for data fetching and static rendering, client components for interactivity.

16. Explain Server Actions and how they replace traditional API routes.

Server Actions let you define async functions that run on the server and can be called directly from client components. Instead of building a REST endpoint and fetching from it, you mark a function with "use server" and call it from a form or event handler. React handles the serialization, loading states, and error handling. This simplifies the data mutation story significantly.

17. What's new in React 19 that interviewers care about?

Key React 19 features include: the use hook for reading promises and context in render, the useFormStatus and useActionState hooks for form management, improved Suspense for data fetching, and the React Compiler (formerly React Forget) that auto-memoizes components. Being conversant in these shows you stay current.

Practical Coding & System Design

18. Design an autocomplete/typeahead component from scratch.

This is a classic FAANG frontend question. Key considerations: debounce the input to avoid excessive API calls, handle race conditions (newer requests should override stale ones using an abort controller), implement keyboard navigation with proper ARIA attributes, manage focus and blur events for the dropdown, cache previous results, and show loading/error states. Bonus: virtualize the dropdown list for large datasets.

19. How would you implement infinite scrolling with React?

Use an IntersectionObserver to detect when a sentinel element at the bottom of the list enters the viewport, triggering the next page fetch. Key decisions: cursor-based vs. offset pagination, optimistic loading vs. "Load More" button, virtualizing off-screen items for memory efficiency, and proper loading/error states. Discuss trade-offs with each approach.

20. Walk through how you'd architect a large-scale React application.

Discuss folder structure (feature-based vs. type-based), state management strategy (local vs. global, which library and why), data fetching patterns (React Query/SWR for caching and deduplication), routing strategy, code splitting approach, error handling strategy (error boundaries + monitoring), testing pyramid (unit, integration, E2E), and CI/CD pipeline. The interviewer wants to see that you've built real systems and can make pragmatic trade-offs.

How to Use These Questions

Don't just read the answers — practice explaining them out loud. FAANG interviews are as much about communication as they are about knowledge. Can you explain reconciliation to a non-React engineer? Can you whiteboard an autocomplete component while talking through your decisions?

The best preparation combines self-study with live practice. Review these questions, build small projects that exercise each concept, then do mock interviews with someone who can give you real feedback.

Continue Reading