The fix: an Effect Event reads the latest theme
Toggling the theme no longer touches the connection. When the room changes, the effect re-syncs, and the toast uses the current theme (dark), not the one from the first render.
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 to #general! (light theme)
--- toggle theme
--- switch room
disconnect from #general
connect to #travel
toast: connected to #travel! (dark theme)