An error boundary (still a class)
React logs the caught error with the component name, then the boundary's componentDidCatch runs. Resetting the boundary's state renders the children again; this time they succeed.
Before hooks, components with state were JavaScript classes with this.state, this.setState and lifecycle methods; you need to read them, explain how each maps to hooks, and migrate them safely, and error boundaries still have to be classes.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Convert this class to a function component with hooks: a Toggle with state = { on: false }, a flip = () => this.setState((s) => ({ on: !s.on })) method, and componentDidUpdate that logs on is now true/false when on changes.
Write a class Ticker that counts up every second from mount and stops on unmount.
Explain it without notes
How does this.setState differ from a useState setter?
List the lifecycle methods in order for mount, update and unmount, and say which phase each runs in.
How do you migrate a class that subscribes in componentDidMount, re-subscribes in componentDidUpdate and unsubscribes in componentWillUnmount?
Why can't error boundaries be written with hooks, and what does each boundary method do?
Preview
Console
Nothing logged yet.Expected console output
Error: price service down
The above error occurred in the <Price> component.
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
componentDidCatch: price service down
shown: Something went wrong: price service down
shown: Price: 499