Intermediate LevelReact JS & React 19
How do you programmatically reset an Error Boundary when route or props change?
❓ Interview Prompt: Explain `react-error-boundary`, `FallbackComponent`, `resetKeys`, `useErrorBoundary`, and clearing error states on navigation.
Standard Error Boundaries remain in an error state until manually reset. Using the industry-standard library 'react-error-boundary':
Features:
•
'resetKeys={[location.pathname]}': Automatically resets the error boundary and attempts a clean re-render whenever specified dependencies (like route paths) change!
•
'FallbackComponent={({ error, resetErrorBoundary }) => ...}': Provides a reset button handler to retry rendering.
Code Implementation Example
jsx
import { ErrorBoundary } from 'react-error-boundary';
import { useLocation } from 'react-router-dom';
function ErrorFallback({ error, resetErrorBoundary }) {
return (
<div>
<h2>Error: {error.message}</h2>
<button onClick={resetErrorBoundary}>Try Again</button>
</div>
);
}
function App() {
const location = useLocation();
return (
// Resets error boundary automatically on route change!
<ErrorBoundary FallbackComponent={ErrorFallback} resetKeys={[location.pathname]}>
<Routes />
</ErrorBoundary>
);
}💡Resetting Error Boundaries on route navigation using resetKeys.
🎯 Interview Key Takeaway
Use react-error-boundary with resetKeys to automatically clear error boundaries when users navigate to new routes.
#Error Boundary#react-error-boundary#resetKeys#Intermediate
Back to all React JS & React 19 Questions→