Migration: three lifecycle methods become one effect
Same behaviour, a third of the code, and no forgotten prevProps check. On the update the class lines come first because componentDidUpdate runs in the layout step, while useEffect runs in the later passive step (Topic 26.1).
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
class connect general
hooks connect general
--- switch room ---
class disconnect general
class connect travel
hooks disconnect general
hooks connect travel
--- close ---
class disconnect travel
hooks disconnect travel