DeployU
Interviews / Frontend Engineering / A critical component is crashing in production. How would you debug it?

Questions

A critical component is crashing in production. How would you debug it?
Q
This component makes duplicate API calls in development. How does Strict Mode help identify the bug?
Q C
This component is crashing the entire app. Implement an Error Boundary to gracefully handle the error.
Q C
This statically generated page is showing stale data. How do you fetch and display live data on the client?
Q C
This component is failing its test. Fix the component to make the test pass.
Q C
This form doesn't reset correctly. Fix the bug and refactor to a more robust solution.
Q C
Your app's state management is a mess. How would Flux architecture help?
Q
This button should increment twice, but only increments once. How do you fix it?
Q C
This application suffers from 'prop drilling.' How do you fix it?
Q C
This component's UI is not updating. Why is direct state mutation problematic?
Q C
This component's state logic is complex. Refactor it with `useReducer`.
Q C
An expensive component is re-rendering unnecessarily. How would you fix this state management issue?
Q C
This list re-renders inefficiently. How does React's reconciliation algorithm explain why?
Q C
This component re-renders unnecessarily due to context object reference changes. How do you fix it?
Q C
An expensive component is re-rendering unnecessarily. How would you fix this state management issue?
Q C
This optimized component re-renders unnecessarily. How do you fix it with `useCallback`?
Q C
This large component is slowing down initial load. Implement code splitting.
Q C
This component performs expensive calculations unnecessarily. Optimize it with `useMemo`.
Q C
This component re-renders unnecessarily. How do you prevent it?
Q C
This data fetching component has a race condition. How do you fix it?
Q C
This data fetching component is causing an infinite loop. How do you fix it?
Q C
This component causes a hydration mismatch error. Why and how to fix it?
Q C
This component has hardcoded text. Refactor it to support multiple languages.
Q C
This component is not reusable. Refactor it using the composition pattern.
Q C
This modal is clipped by its parent. Fix it using a React Portal.
Q C
This component is breaking layout. Fix it using a React Fragment.
Q C
This custom component is not forwarding its ref. How do you fix it?
Q C
These components duplicate logic. Refactor them using a Higher-Order Component.
Q C
These components duplicate logic. Refactor them using the Render Props pattern.
Q C
This component manages loading state imperatively. Refactor it to use React Suspense.
Q C
This legacy class component mixes logic and UI. Refactor it to a modern functional component using Hooks.
Q C
Why does this component log the old state value after calling a useState setter?
Q C
Clarify the core React concepts: Element, Component, and Node.
Q
Your team is evaluating React. How would you explain its core benefits?
Q
This component is crashing with a JSX syntax error. How do you fix it?
Q C
A child component is failing to update the parent's state. Why is this happening and how do you fix it?
Q C
This component is trying to modify a prop directly. How do you fix it?
Q C
Your UI freezes during large updates. How does React Fiber help?
Q
This component has accessibility ID issues. Fix it with `useId`.
Q C
This component flickers when resizing. Fix it using the correct effect hook.
Q C
This component is crashing due to a 'Rules of Hooks' violation. How do you fix it?
Q C
This `useEffect` is logging a stale value. How do you fix its dependency array?
Q C
This component has issues managing a timer ID. Fix it with `useRef`.
Q C
These components duplicate stateful logic. Refactor them using a custom Hook.
Q C
This form uses an uncontrolled input. Refactor it to be a controlled component.
Q C

A critical component is crashing in production. How would you debug it?

debugging Debugging & Tools Interactive Quiz
Wrong Approach

I would add console.log statements everywhere and try to reproduce the bug locally.

Right Approach

First, I need to contain the crash and gather data systematically. Here's my approach:

Step 1: Containment with Error Boundaries

My first step isn’t to fix the bug—it’s to stop the bleeding and gather intel.

  • Action: Wrap the dashboard in an Error Boundary
  • Why: It catches errors in the component tree, renders a fallback UI, and logs the exact error + stack trace to monitoring (Sentry, Datadog)

Step 2: Inspection with React DevTools

With error logs coming in, I reproduce the bug locally.

  • Components Tab: Inspect props and state of the crashing component. Look for undefined values or impossible states.
  • Profiler: Record the rendering sequence to see what’s changing on each commit.

Step 3: Targeted Analysis with Breakpoints

Once I have a theory, I dive into the code.

  • Use debugger; or browser breakpoints instead of console.log
  • Inspect the call stack, variable values, and step through line-by-line

This methodical process—Contain, Gather, Inspect, Analyze—is how senior engineers debug complex production issues.

Practice Question

What is the primary function of the 'Components' tab in the React DevTools?