What is the purpose of an error boundary in React?

What is the purpose of an error boundary in React?

• A. Catch rendering errors in a component subtree and render fallback UI.
• B. Catch only network errors from fetch outside render.
• C. Prevent any errors from ever occurring.
• D. Replace a component with a generic error component on any error.

Answer: (A)

An error boundary catches rendering errors within a part of the UI and shows a fallback UI instead of crashing the whole app. When a child component throws during render (or in its lifecycle methods or constructors), the boundary intercepts that error and React renders the boundary’s fallback UI, letting the rest of the interface stay interactive. This provides a safer, more resilient user experience by isolating failures to a specific subtree. To implement, you typically create a class component that tracks an error state and uses componentDidCatch (and optionally getDerivedStateFromError) to set the fallback state and perform logging. In render, you show the fallback UI if an error was caught; otherwise you render the normal children. Keep in mind that error boundaries don’t catch errors inside event handlers or in asynchronous code outside the render lifecycle, and they don’t prevent errors from occurring in the first place. They’re a targeted, graceful recovery mechanism for render-time failures in a defined portion of the UI.

An error boundary catches rendering errors within a part of the UI and shows a fallback UI instead of crashing the whole app. When a child component throws during render (or in its lifecycle methods or constructors), the boundary intercepts that error and React renders the boundary’s fallback UI, letting the rest of the interface stay interactive. This provides a safer, more resilient user experience by isolating failures to a specific subtree.

To implement, you typically create a class component that tracks an error state and uses componentDidCatch (and optionally getDerivedStateFromError) to set the fallback state and perform logging. In render, you show the fallback UI if an error was caught; otherwise you render the normal children.

Keep in mind that error boundaries don’t catch errors inside event handlers or in asynchronous code outside the render lifecycle, and they don’t prevent errors from occurring in the first place. They’re a targeted, graceful recovery mechanism for render-time failures in a defined portion of the UI.