Error boundaries isolate rendering failures in descendants. They do not automatically catch every event-handler error or arbitrary asynchronous rejection.
Before you start
You should know how a function component renders JSX, receives props and handles events. Follow the value through render, interaction and the next render. Small snippets below belong inside an existing React application unless they are explicitly shown as complete components.
The practical goal is to reason through this situation: A failed widget can display recovery UI while the rest of the dashboard survives. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Locate rendering failure scope
A widget that throws while rendering should not destroy the entire dashboard. Choose a boundary around the recoverable region.
Step 2: Handle actions explicitly
A failed save promise is an action failure. Catch it and update action state rather than expecting the rendering boundary to intercept it.
Step 3: Define recovery ownership
Offer retry or reset only if it can actually recreate valid state. Preserve unrelated work outside the failed region.
Worked scenario
A failed widget can display recovery UI while the rest of the dashboard survives.
A dashboard boundary can replace a broken chart with recovery UI while the editor remains mounted. A save handler separately uses try/catch around its awaited request and displays a domain error beside the form. These mechanisms address different execution paths, even if their visible error messages look similar.
Common mistake
Treating a boundary as universal request error handling leaves async failures unhandled.
Verify the behavior
Throw during child rendering, then reject a save promise. Verify each reaches its intended recovery path and unrelated draft state remains intact.
Interview exercise
Handle a failed save action.
Answer and reasoning
Catch the action’s error, update its domain state and display an accessible message; reserve boundaries for rendering recovery.
Continue learning
Compare the scenario with the React interview questions and test your understanding with the React MCQs. For terminology and implementation details, consult the reference material.