React Error Boundaries and StrictMode Quiz
Four drills on class-component error boundaries and how React.StrictMode surfaces effect bugs by double-invoking lifecycles in development.
Question Bank
Medium
JavaScript
4 questions
quiz
react
hooks
error-handling
571 views
16
Implement a class-based <ErrorBoundary> that catches render errors in its subtree and shows a fallback. Wrap a <Crashy> child with it.
Name three kinds of errors an <ErrorBoundary> does NOT catch. How do you handle each one?
When <App /> is wrapped in <React.StrictMode>, your useEffect setup logs run twice in development. Why, and what does this catch?
The effect below opens a websocket but never closes it. Under StrictMode the room shows two listeners after mount. Fix the effect.
import { useEffect } from 'react';
function Room({ id }) {
useEffect(() => {
const ws = new WebSocket(`/rooms/${id}`);
ws.onmessage = (e) => console.log(e.data);
}, [id]);
return null;
}