Using error boundaries 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 component tree that crashed.

intermediate

Which lifecycle method is used in class components to create an error boundary?

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.

intermediate

Can functional components be error boundaries in React 18+?

No, currently only class components can be error boundaries. Functional components cannot catch errors with error boundary behavior.

beginner

What happens if an error boundary catches an error?

It stops the error from propagating further, shows a fallback UI, and prevents the whole app from crashing.

intermediate

Why should you place error boundaries strategically in your React app?

To isolate errors to specific parts of the UI, so only that part shows a fallback UI and the rest of the app keeps working smoothly.

Which React component type can be an error boundary?

A Functional components

B Class components

C Both class and functional components

D Only components using hooks

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 componentDidCatch

B componentWillUnmount

C render

D getDerivedStateFromError

getDerivedStateFromError updates the state to show fallback UI after an error.

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

A Logs the error and shows fallback UI

B Reloads the entire app

C Ignores the error and continues rendering

D Throws the error to the browser console only

Error boundaries catch errors, log them, and show a fallback UI to avoid crashing the whole app.

Where should you place error boundaries in a React app?

A Around components where errors are likely

B Around every single element

C Only at the root component

D Only inside event handlers

Place error boundaries around components where errors might happen to isolate failures and keep the rest of the app working.

Can error boundaries catch errors inside event handlers?

A Yes, always

B Only in functional components

C No, errors in event handlers are not caught by error boundaries

D Only if wrapped in try-catch

Error boundaries do not catch errors inside event handlers; those should be handled with try-catch blocks.

Explain how to create an error boundary component in React and how it works.

Think about lifecycle methods and state updates to show fallback UI.

Describe why error boundaries are important in React apps and how to use them effectively.

Consider user experience and app stability.