Debugging Questions

Definition

Questions that provide broken code and ask you to spot the bug and fix it.

Explain Like I'm New

The interviewer shows you a piece of code that causes an infinite loop, a memory leak, or a stale closure, and asks you to explain why it's broken.

Real World Example

A classic stale closure bug where `setInterval` inside a `useEffect` keeps logging the old state value.

Common Use Cases

•Live Coding Interviews

Interactive Example

Console output will appear here...

Interview Questions

basic

Why am I getting a 'Cannot update a component while rendering a different component' warning?

intermediate

Spot the bug: `useEffect(() => { const timer = setInterval(() => console.log(count), 1000); }, []);`

advanced

Why is my React app showing a blank white screen with no console errors in production?

Flash Cards

Question

Spot the bug in the setInterval code.

Click to reveal answer

Answer

This is a Stale Closure. Because the dependency array is empty `[]`, the effect only runs once. At that time, `count` was `0`. The interval function will forever log `0` because it closed over the initial render's variables. To fix this, you must add `count` to the dependency array, AND return a cleanup function `() => clearInterval(timer)` to prevent memory leaks.

Question

Cannot update a component while rendering a different component?

Click to reveal answer

Answer

This happens when you call a state updater function (like `setCount`) directly in the body of a functional component, rather than inside an event handler (`onClick`) or a `useEffect`. It causes an immediate re-render.