About useEffectEvent

useEffectEvent is a React hook for situations where you want to read the latest props or state from inside an Effect, but you don't want the Effect to re-run when those values change.

The problem it solves

For example, suppose you want to connect to a chat room and show a notification using the current theme when the connection is established.

function ChatRoom({ roomId, theme }) { useEffect(() => { const connection = createConnection(roomId); connection.on('connected', () => { showNotification('Connected', theme); }); connection.connect(); return () => connection.disconnect(); }, [roomId, theme]); // Including theme causes a reconnect every time the theme changes } 

If you leave theme out of the dependency array, you get a lint error; if you include it, simply switching the theme triggers a reconnection. The connection should only be re-established when roomId changes.

Writing it with useEffectEvent

import { useEffect, useEffectEvent } from 'react'; function ChatRoom({ roomId, theme }) { const onConnected = useEffectEvent(() => { showNotification('Connected', theme); }); useEffect(() => { const connection = createConnection(roomId); connection.on('connected', () => { onConnected(); }); connection.connect(); return () => connection.disconnect(); }, [roomId]); // Don't include onConnected in the dependency array } 

Inside onConnected, you can always read the latest theme, but the Effect does not re-run when theme changes.

How to think about it

• An Effect Event separates the "reactive" part of an Effect (synchronization that responds to changes in roomId) from the "non-reactive" part (logic that only reads the latest values at that moment).
• An Effect Event is a function that always "sees" the latest props and state from each render, so the latest values are used whenever the Effect calls it.

Rules for using it

1. Call it only from inside an Effect. Don't call it during rendering, and don't pass it to other components or hooks. Don't use it outside Effects, such as in event handlers; use a regular function there instead.
2. Don't put it in the dependency array. An Effect Event is not a stable reference, and it isn't something to include in dependencies. The latest version of eslint-plugin-react-hooks understands this rule.
3. Don't use it just to silence dependency warnings. First ask, "Should this code really react to changes?" Then extract only the parts that shouldn't react. Pushing a value that should be reactive (such as roomId) into an Effect Event will cause bugs.

Typical use cases

• Logging or showing a notification when a connection or subscription completes (uses the latest state, but no reconnection is needed)
• Reading the latest values inside callbacks for timers or event listeners
• Sending analytics, such as including the latest cart contents when the user navigates between pages

Note

useEffectEvent became a stable API in React 19.2. In earlier versions it was experimental and cannot be used. We recommend checking your React version and keeping your ESLint plugin up to date.