Error boundaries concept in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an error boundary in React?

An error boundary is a React component that catches JavaScript errors anywhere in its child component tree, logs those errors, and displays a fallback UI instead of the crashed component tree.

intermediate

Which lifecycle method is used in class components to catch errors for error boundaries?

The lifecycle method static getDerivedStateFromError(error) is used to update state when an error is caught, and componentDidCatch(error, info) is used to log the error or perform side effects.

intermediate

Can functional components be error boundaries in React 19+?

No, currently only class components can be error boundaries because error boundary methods rely on lifecycle methods not available in functional components.

beginner

What happens to the UI when an error boundary catches an error?

The error boundary renders a fallback UI, which is a safe and user-friendly message or component, instead of the broken component tree that caused the error.

beginner

Why should you use error boundaries in a React app?

Error boundaries prevent the entire React app from crashing due to errors in parts of the UI. They improve user experience by showing fallback UI and help developers catch and log errors.

Which React component type can be an error boundary?

A Stateless components

B Functional components with hooks

C Pure components

D Class components

Only class components can be error boundaries because they support lifecycle methods like getDerivedStateFromError and componentDidCatch.

What method updates state when an error is caught in an error boundary?

A getDerivedStateFromError

B componentDidCatch

C renderError

D componentWillCatch

getDerivedStateFromError is a static method that updates state to show fallback UI after an error.

What does an error boundary do when it catches an error?

A Reloads the page

B Logs the error and shows fallback UI

C Ignores the error

D Restarts the app

Error boundaries catch errors, log them, and render a fallback UI to keep the app running.

Can error boundaries catch errors in event handlers?

A No, error boundaries do not catch errors in event handlers

B Only in class components

C Only if wrapped in try-catch

D Yes, always

Error boundaries catch errors during rendering, lifecycle methods, and constructors, but not in event handlers.

What is a good fallback UI for an error boundary?

A A blank screen

B The error stack trace

C A friendly message explaining something went wrong

D Reload button only

A friendly message helps users understand the app had a problem without showing confusing technical details.

Explain how error boundaries improve user experience in React apps.

Think about what happens when a part of the UI breaks and how error boundaries help.

Describe the lifecycle methods involved in creating an error boundary class component.

Focus on methods that catch errors and update UI.