🪝 Introduction to useEffectEvent
The useEffectEvent Hook is a React Hook that lets you create Effect Events. These are functions that can be called from inside an effect while always accessing the latest props and state without causing the effect to re-run unnecessarily.
Important
🎯 Why Use useEffectEvent?
Sometimes an effect needs access to the latest values without treating those values as dependencies. Traditionally, this could lead to effects running more often than necessary. useEffectEvent solves this by allowing non-reactive logic to be extracted into an Effect Event.
- Access the latest props and state inside an effect.
- Reduce unnecessary effect re-executions.
- Separate reactive and non-reactive logic.
- Write cleaner and easier-to-maintain effects.
⚙️ Syntax
Basic Syntax
const onEvent = useEffectEvent(() => {
// Non-reactive logic
});
useEffect(() => {
onEvent();
}, [dependencies]);| Part | Description |
|---|---|
| useEffectEvent() | Creates an Effect Event. |
| onEvent | A function that always reads the latest props and state. |
| useEffect() | Calls the Effect Event when the effect runs. |
🔄 How useEffectEvent Works
💻 Basic Example
Using useEffectEvent
import {
useEffect,
useEffectEvent
} from "react";
function Chat({ roomId, theme }) {
const onConnected = useEffectEvent(() => {
console.log("Theme:", theme);
});
useEffect(() => {
// Imagine connecting to a chat room.
onConnected();
}, [roomId]);
return <h1>Chat Room</h1>;
}The effect depends only on roomId, while the Effect Event always reads the latest value of theme without causing the effect to re-run whenever the theme changes.
📊 Traditional Effect vs Effect Event
| Traditional Effect | Effect Event |
|---|---|
| Logic is written directly inside useEffect. | Non-reactive logic is extracted into useEffectEvent. |
| May require additional dependencies. | Keeps dependencies focused on reactive values. |
| Effects may re-run more frequently. | Helps avoid unnecessary effect executions. |
| Can become difficult to maintain. | Improves readability and separation of concerns. |
📅 Execution Flow
React renders the component.
useEffectEvent creates an Effect Event.
useEffect executes when its dependencies change.
The Effect Event is called from inside the effect.
The Effect Event accesses the latest props and state.
🎯 Common Use Cases
Display notifications using the latest theme or user preferences without reconnecting an effect.
Keep subscriptions dependent only on values that actually control the subscription.
Record logs that always include the latest state while keeping effect dependencies minimal.
Send analytics events using current application data without unnecessarily restarting effects.
⚠️ When Not to Use useEffectEvent
- Do not replace ordinary event handlers such as button click handlers.
- Do not use it outside of effect-related logic.
- Do not use it as a substitute for state management.
- Keep reactive logic inside useEffect dependencies.
Warning
✅ Best Practices
- Use useEffectEvent to separate reactive and non-reactive logic.
- Keep dependency arrays focused only on reactive values.
- Write small, focused Effect Events.
- Continue using useEffect for synchronization with external systems.
- Use this Hook only when it improves effect organization and clarity.
📚 Official Resource
Learn more about useEffectEvent in the official React documentation at React useEffectEvent Documentation.