What are error boundaries in React v16?
Assesses fundamental understanding of React conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Note: Error boundaries were introduced in React 16 and remain valid in current React versions (18/19).
_Error boundaries_ are components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
A class component becomes an error boundary if it defines these lifecycle methods:
static getDerivedStateFromError(error)- for rendering fallback UIcomponentDidCatch(error, info)- for logging error information
```jsx harmony
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI
return { hasError: true };
}
componentDidCatch(error, info) {
// Log error to an error reporting service
console.error('Error caught by boundary:', error, info);
logErrorToMyService(error, info);
}
render() {
if (this.state.hasError) {
// Render custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
Usage:
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>
```
Note: Error boundaries currently only work with class components. There is no hook equivalent yet, though use() hook in React 19 provides some error handling capabilities.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.