React.js ~useEffectEvent~

useEffectEvent is a React hook designed for scenarios where you need to access the most recent props or state within an Effect, but you don't want the Effect to re-run when those values change. This hook addresses a specific problem by allowing you to connect to a chat room and display a notification using the current theme upon establishing a connection.

To implement this, you would use the useEffect hook with useEffectEvent from the 'react' package. By doing so, the connection is re-established only when the roomId changes, rather than every time the theme changes. The useEffectEvent function can be used to call the latest theme at the moment the Effect is invoked, without causing the Effect to re-run when the theme changes.

This hook is designed to separate the reactive part of an Effect from the non-reactive part, ensuring that only necessary reactivity occurs. It's important to call useEffectEvent only within an Effect, not during rendering or when passing it to other components or hooks. Additionally, it should not be included in the dependency array.

This hook is meant to replace the use of regular functions in event handlers and is not intended to be stable or included in dependencies. The eslint-plugin-react-hooks can help enforce these rules. The article emphasizes that useEffectEvent should only be used for specific cases such as logging, showing notifications, reading the latest values inside timers or event listeners, and sending analytics.

It's crucial to avoid using it to silence dependency warnings and ensure that only reactive values are included in an Effect Event to prevent bugs. The hook became a stable API in React 19.2, so it's recommended to check your React version and update your ESLint plugin accordingly.