تكرار السؤال: …
الإجابة المختصرة
تفصل دالة useEffectEvent المنطق التفاعلي (الذي يجب أن يقرأ أحدث المتغيرات دائماً) عن مصفوفة تبعيات الـ Effect (التي يجب ألا تتسبب في إعادة تشغيل الـ Effect غير المرغوب).
الشرح
كثيرًا ما نحتاج إلى قراءة متغيرات حديثة (مثل theme أو callback) داخل useEffect دون أن نريد إعادة تشغيل الـ Effect في كل مرة يتغير فيها هذا المتغير. توفر useEffectEvent (مستقرة في React 19.2، وكانت تجريبية قبل ذلك باسم experimental_useEffectEvent) حلًا يسمح باستدعاء دوال تقرأ أحدث الـ props والـ state دون إدراجها في مصفوفة التبعيات. لا تُستدعى دالة الـ Effect Event أثناء الـ Render ولا تُمرَّر إلى مكونات أخرى، بل تُستخدم داخل الـ Effects فقط.
مثال بالكود
import { useEffect, useEffectEvent } from "react";
function ChatRoom({ roomId, theme }: { roomId: string; theme: string }) {
const onConnected = useEffectEvent(() => {
showNotification("Connected!", theme); // always reads the latest theme
});
useEffect(() => {
const connection = createConnection(roomId);
connection.on("connected", () => onConnected());
connection.connect();
return () => connection.disconnect();
}, [roomId]); // reconnects only when roomId changes, not when theme changes
}أخطاء شائعة
- استدعاء دالة مسجلة بـ useEffectEvent أثناء الـ Render بدلاً من داخل الـ Effect نفسه.