Every lifecycle method, logged
Mount, one update and unmount. setState merged likes and kept note; its callback ran after componentDidUpdate, once the update was committed.
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
constructor
getDerivedStateFromProps Asha
render
componentDidMount
--- like ---
getDerivedStateFromProps Asha
shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate likes 0 -> 1 snapshot
setState callback: likes = 1 note = hi
--- remove ---
componentWillUnmount