Error Boundaries in React Quiz Quiz

Deepen your understanding of error boundaries in React by answering questions about their purpose, behavior, lifecycle methods, and best practices. This quiz is designed to help developers grasp when and how to effectively use error boundaries for reliable UI error handling.

1. Scope of Error Boundaries

   Which type of errors can React error boundaries catch during the render process?

   1. JavaScript exceptions occurring in the render, lifecycle, and constructor methods of class components
   2. Syntax errors detected at compile time
   3. Unhandled promise rejections in async functions outside the component tree
   4. Network request failures before data reaches components

   Explanation: Error boundaries are specifically designed to catch JavaScript exceptions in the rendering phase, as well as lifecycle and constructor methods of class components. They do not catch compile-time syntax errors, so syntax-related issues are not handled by error boundaries. Network request failures and unhandled async rejections outside components are not intercepted by this mechanism. Therefore, only exceptions during render, lifecycle, and constructor methods are within their scope.

2. Implementation Requirements

   When creating a custom error boundary in React, which method must you implement to catch errors and display a fallback UI?

   1. componentDidCatch
   2. shouldComponentUpdate
   3. getDerivedStateFromProps
   4. componentWillUpdate

   Explanation: The componentDidCatch method is required in a class component to catch errors and enable a custom fallback UI. componentWillUpdate is unrelated to error handling and manages updates. shouldComponentUpdate controls re-rendering and does not process errors. getDerivedStateFromProps is for updating state in response to prop changes, not error handling.

3. Error Boundaries and Hooks

   Is it possible to implement an error boundary as a functional component using only React Hooks?

   1. No, error boundaries require class components
   2. Yes, by combining useReducer and useMemo
   3. No, but you can partially replicate error boundary behavior with functional components
   4. Yes, with useEffect and useErrorBoundary hooks

   Explanation: Error boundaries only work when written as class components, as they rely on lifecycle methods unavailable to functional components. There are no built-in hooks like useEffect or useErrorBoundary that provide equivalent functionality. useReducer and useMemo do not facilitate error handling at this level. Functional components cannot fully replicate error boundary behavior natively, making class components necessary.

4. Placement Strategy Importance

   Why is the placement of error boundary components significant in a React application's component tree?

   1. All error boundaries automatically catch errors from the entire application regardless of placement
   2. Error boundaries can only be placed at the top-level of the app
   3. The placement determines which part of the UI will be replaced by the fallback UI when an error is caught
   4. Placement only affects performance and not error handling behavior

   Explanation: The location of an error boundary in the component tree decides the scope of which child components are protected; only those beneath the boundary are affected by its fallback UI. Placement does not solely impact performance, and error boundaries do not automatically catch errors from the entire application unless they wrap all content. Error boundaries are not restricted to top-level placement and can be applied at various tree depths for granular control.

5. Limitations of Error Boundaries

   Which of the following is NOT a limitation of React error boundaries?

   1. They prevent the entire application from crashing due to an error in any component
   2. They cannot catch errors occurring in asynchronous code like setTimeout
   3. They do not catch errors inside event handlers
   4. They do not catch errors in server-side rendering

   Explanation: Error boundaries do not, by default, prevent the entire app from crashing due to any component error—only the subtree under the boundary is handled, not the whole app. They do not catch errors in event handlers, asynchronous code, or server-side rendering—these are actual limitations. The correct answer clarifies this common misunderstanding.