The problem: a theme change reconnects the chat
Correct but wasteful: changing a colour drops and re-opens the network connection. In a real chat, users would see "reconnecting…" every time they toggled dark mode.
Some logic inside an effect should see the latest props and state without making the effect re-run when they change; useEffectEvent (React 19.2) wraps that logic in an Effect Event, a non-reactive function you call only from inside effects.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
An effect starts an interval that adds step to count every second, with deps [step], so changing step restarts the timer. Rewrite it so changing step doesn't restart the interval but the next tick uses the new step.
A useEffect with [productId] logs "viewed", productId, currency. Changing currency shouldn't log a new view. Write it.
Explain it without notes
What problem does useEffectEvent solve? Give an example.
What is the stale value problem, and why does silencing the linter cause it?
List the rules for using Effect Events.
How is an Effect Event different from a function wrapped in useCallback?
Preview
Console
Nothing logged yet.Expected console output
connect to #general
toast: connected! (light theme)
--- toggle theme (same room!)
disconnect from #general
connect to #general
toast: connected! (dark theme)