Senior LevelReact JS & React 19
How does the experimental useEffectEvent (useEvent) hook solve stale closure issues without triggering effect re-runs?
❓ Interview Prompt: Explain `useEffectEvent` (formerly `useEvent`), stable event handler identity inside effects, avoiding effect re-execution, and non-reactive logic.
'useEffectEvent' (formerly 'useEvent') separates non-reactive event logic from reactive effect dependencies:
Problem Solved:
Inside 'useEffect', you often need to read a prop or state variable WITHOUT adding it to the dependency array (which would re-trigger the effect!).
•
'useEffectEvent(fn)' creates a function that always sees the latest props/state but maintains a stable function identity that does NOT trigger effect re-runs!
Code Implementation Example
jsx
import { useEffect, useEffectEvent } from 'react';
function ChatRoom({ roomId, theme }) {
// Creates stable function that reads latest 'theme' WITHOUT triggering effect!
const onConnected = useEffectEvent(() => {
showNotification('Connected!', theme);
});
useEffect(() => {
const conn = createConnection(roomId);
conn.on('connected', () => onConnected()); // Reads latest theme safely!
conn.connect();
return () => conn.disconnect();
}, [roomId]); // Re-connects ONLY when roomId changes, NOT theme!
}💡Separating non-reactive event logic from effect dependencies with useEffectEvent.
🎯 Interview Key Takeaway
Use useEffectEvent to read the latest props/state inside effects without adding them to the effect dependency array.
#useEffectEvent#Hooks#Stale Closures#Senior
Back to all React JS & React 19 Questions→