Pass the reactive value as an argument
Adding to the cart logs nothing: a cart change isn't a visit. Navigating logs one visit, and it reports the latest cart count (2).
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
analytics: visit /home with 0 items in cart
--- add two items
--- navigate
analytics: visit /checkout with 2 items in cart