Interview Prep Guide

React Production and Architecture Interview Questions

Modern React questions on state ownership, effects, concurrency, accessibility, rendering, testing, and production debugging.

Applied React Questions

  1. How do you decide where React state should live?

    Keep state at the lowest common owner that needs to coordinate it, and avoid duplicating values that can be derived.

  2. When should logic be extracted into a custom Hook?

    Extract reusable stateful behavior with a clear contract, not merely to shorten a component.

  3. How should React applications handle server state?

    Treat remote data as asynchronous cached state with freshness, errors, retries, invalidation, and ownership distinct from local UI state.

Advanced React Questions

  1. What problems do transitions and deferred values solve in React?

    They let nonurgent updates yield to urgent interactions so typing and direct manipulation remain responsive.

  2. How does React Compiler change memoization decisions?

    Compiler-assisted memoization can reduce manual memoization, but developers still need pure components, correct dependencies, and measured architecture.

  3. How would you design an accessible reusable modal component?

    Manage semantics, labelled relationships, initial focus, focus trapping, Escape, restoration, background interaction, scrolling, and reduced motion.

  4. What are error boundaries for, and what do they not catch?

    They provide a fallback for render-tree errors but do not replace handling for event, async, server, or data-validation failures.

React Production Scenarios

  1. A React page re-renders hundreds of rows on every keystroke. What do you do?

    Profile first, then reduce state scope, stabilize only proven boundaries, defer nonurgent filtering, or virtualize large visible lists.

  2. An effect sends duplicate API requests in development. How do you fix the underlying issue?

    Make synchronization safe to start, clean up, and restart; cancel stale work and keep write operations explicitly user-driven or idempotent.

Additional Frequently Tested Questions

  1. A React page renders old data after rapid navigation. How would you fix it?

    Tie each request to the active route or input, cancel obsolete work where possible, and ignore results that no longer match the current request identity.

  2. How would you investigate a React component that re-renders too often?

    Use the React profiler to identify the expensive commit, then inspect changed props, state ownership, context updates, keys, and repeated effects.

  3. What causes hydration mismatches in a server-rendered React application?

    They occur when the server markup differs from the client’s first render because of time, randomness, browser-only data, invalid HTML, or inconsistent fetched state.

  4. How should a large React form be structured for performance and correctness?

    Model validation and submission explicitly, isolate field updates, keep one owner for each value, and avoid rerendering the entire form for unrelated changes.

  5. How do error boundaries improve a production React application?

    They isolate rendering failures in a subtree and provide a recovery interface instead of allowing the entire visible application to disappear.

  6. How would you prevent duplicate analytics events in React?

    Define the event around a stable business transition, centralize ownership, and make effect-driven tracking resilient to remounts and development checks.