useEffectEvent

The problem

An effect that runs a timer needs the newest count, but listing count as a dependency restarts the timer on every change. Leaving it out keeps a stale count.

The pattern that fixes it

useEffectEvent wraps the part that only needs to read the latest values. The effect depends on delay alone, so the timer keeps running and every tick sees the current count. MUI shipped the same idea earlier as useEventCallback.

In plain words

An effect is code that keeps something running, like a timer. Sometimes that code needs to peek at the newest value without being restarted every time the value changes. useEffectEvent lets you mark exactly that peeking part.

A security guard patrols on a fixed schedule. When the manager changes the visitor list, the guard should read the new list at the next stop, not restart the whole patrol from the front door.

Terms

effect

Code React runs after rendering to start something outside React, like a timer or a connection.

dependency list

The array at the end of useEffect. When any value in it changes, React stops the old effect and starts a new one.

stale value

An old copy of a variable captured by a function that was made on an earlier render.

effect event

A function made with useEffectEvent that always sees the latest values but never counts as a dependency.

Going deeper

How does it work?

Every render creates new functions that remember the values from that render. An effect keeps the function from the render it started in, which is why it goes stale. useEffectEvent gives you a function whose body is swapped to the newest render after each commit, while its identity stays out of the dependency rules. Calling it inside the interval always runs the latest body.

Pitfalls: where it does nothing, or is not allowed

Only call an effect event from inside effects (or other effect events). Do not pass it to children or put it in a dependency array; the linter will complain. It also does not replace dependencies that really should restart the effect: if the timer should restart when delay changes, delay stays in the list.

When not to use it, and alternatives

If the code is a normal click handler, you do not need it, handlers already see the latest render. If a value should restart the effect (a room id, a URL), keep it as a dependency. Before React 19.2 people stored the function in a ref, which is what MUI useEventCallback does. The React Compiler does not remove the need for this split.

Keep learning

• Previous: Custom hooks
• Next: useTransition
• Related: memo
• Related: useMemo
• Related: useCallback
• Related: Custom hooks
• Related: useTransition
• Related: useDeferredValue

More courses

• Jobs, linked to lessons — Browse jobs where every requirement links to the chapter that teaches it. See how ready you are, how long the gap takes to close, and which listings look stale.
• Match a job post to courses — Paste a job post. Each skill is matched to a track here and put in learning order, foundations first.
• Database in depth — How a query becomes work. Indexes, isolation, locks, and the plans that explain why a page is slow — not an ORM tour.
• System Design — Eight interview case studies, from a flash sale and Tatkal to a live final and a chat model, plus JWT in separate chapters.
• Microservices — Microservice patterns one diagram at a time: how to split a monolith, how services talk, and how data stays consistent without distributed transactions.
• Kafka — A beginner-to-senior path through event logs, reliable delivery, production operations, and disaster recovery.
• Frontend system design — How a UI is sliced when it is a product, not a page: ownership of state, cache, routes, and what happens when the network lies.
• CSS in depth — See the box, then the page. Visual chapters from the box model through Flexbox surprises, Grid, selectors, and units, then backgrounds, shapes, and visual effects, each with a playground.
• Accessibility — HTML labs first, then a full pass of WAI-ARIA 1.3: naming, every state, widget and structure roles, live regions, ariaNotify, and relationships.
• Docker — What an image is, why layers cache, and how containers find each other on a network.
• Redis — Fifteen Redis patterns, one picture each: cache, session, lock, counter, rate limiter, queue, and when Redis is the wrong tool.