حتى الآن، كان كل ما في الـ components متعلّقًا بـ React: props تدخل، وJSX يخرج، وتغييرات الـ state تُطلق الـ render. لكن Watchlist يحتاج أيضًا إلى لمس أشياء لا تديرها React. يجب أن يقول تبويب المتصفّح «2 to watch»، ويجب أن تنجو القائمة من تحديث الصفحة بحفظها في localStorage. لا شيء من هذا رسم. إنه تزامن (synchronization): إبقاء شيء خارج React متوافقًا مع الـ state الخاص بك. وهذه وظيفة الـ effects.
\nimport { useEffect, useState } from 'react';\n\nexport default function App() {\n const [movies, setMovies] = useState(INITIAL_MOVIES);\n const left = movies.filter((m) => !m.watched).length;\n\n useEffect(() => {\n document.title = `${left} to watch · Watchlist`;\n }, [left]);\n\n // …render the app\n}تأخذ useEffect دالة ومصفوفة اعتماديات (dependency array). ترسم React الـ component، وتحدّث الشاشة، ثم تشغّل الدالة. وبعد مرّات الـ render اللاحقة، لا تشغّلها مجددًا إلا إذا تغيّر شيء في مصفوفة الاعتماديات منذ المرة السابقة. علّم فيلمًا كمُشاهَد، فتنتقل left من 2 إلى 1، ويتحدّث العنوان. اكتب في نموذج الإضافة، فلا تتغيّر left، ويُتخطّى الـ effect.
لمصفوفة الاعتماديات ثلاثة أشكال:
\n| ما تكتبه | \nمتى يعمل الـ effect | \n
|---|---|
useEffect(fn, [a, b]) | \nبعد الـ render الأول، وكلما تغيّرت a أو b | \n
useEffect(fn, []) | \nبعد الـ render الأول فقط | \n
useEffect(fn) | \nبعد كل render | \n
وقاعدة ما يوضع في المصفوفة ليست خيارًا: اسرد كل قيمة من الـ component يقرؤها الـ effect، مثل الـ props والـ state والمتغيّرات المشتقّة منهما. وقاعدة الـ lint الخاصة بالاعتماديات في مشروع Vite (react/exhaustive-deps في Oxlint، وreact-hooks/exhaustive-deps في ESLint) تتحقّق من ذلك نيابةً عنك. إذا أغفلت شيئًا، فسيظل الـ effect يستخدم قيمة قديمة، وهذا هو الخطأ في سؤال الاختبار الثالث.
بعض الـ effects تبدأ شيئًا يجب إيقافه: مؤقّتًا، أو مستمع أحداث، أو اتصالًا. أرجِع دالة تلغيه:
\nuseEffect(() => {\n function handleKeyDown(e) {\n if (e.key === '/') focusSearch();\n }\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n}, []);تستدعي React دالة التنظيف قبل تشغيل الـ effect مجددًا، وحين يُزال الـ component من الشاشة. ومن دونها، سيضيف كل تركيب مستمعًا آخر، وسيعمل الضغط على «/» عدّة مرات.
\nمع <StrictMode> (الموجود في main.jsx لديك)، تفعل React شيئًا غريبًا أثناء التطوير: تركّب الـ component، وتشغّل الـ effects، ثم تشغّل دوال تنظيفها فورًا كأنها تلغي التركيب، ثم تشغّل الـ effects مجددًا. إنه اختبار ضغط. إذا كانت دالة التنظيف تلغي الـ effect بشكل صحيح، فسيتصرّف التطبيق بالطريقة نفسها، ولن ترى إلا سطرًا إضافيًا في السجل. وإن لم تكن كذلك، كأن تنسى إزالة مستمع، فستلاحظ الآن بدل أن تلاحظ في الإنتاج. لا تحاول منع التشغيل المزدوج؛ بل أصلح دالة التنظيف.
حفظ الـ state هو الـ effect النموذجي: كلما تغيّرت movies، اكتبها في التخزين.
const STORAGE_KEY = 'watchlist.movies';\n\nfunction loadMovies() {\n try {\n return JSON.parse(localStorage.getItem(STORAGE_KEY)) ?? [];\n } catch {\n return [];\n }\n}\n\nexport default function App() {\n const [movies, setMovies] = useState(loadMovies);\n\n useEffect(() => {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(movies));\n }, [movies]);\n\n // …\n}هناك تفصيلتان مهمّتان. التحميل يحدث في دالة التهيئة (initializer)، useState(loadMovies)، لا في effect. تمرير الدالة (لا استدعاؤها) يعني أن React تقرأ التخزين للـ render الأول فقط، لا في كل render، فتظهر القائمة المحفوظة فورًا. أمّا التحميل في effect فسيرسم قائمة فارغة أولًا، وقد يكتب effect الحفظ تلك المصفوفة الفارغة فوق أفلامك المخزّنة. كما تستخدم loadMovies كتلة try/catch، لأن التخزين قد يكون محظورًا أو يحتوي على بيانات تالفة، والقيمة المعطوبة يجب ألّا تُسقط التطبيق كله.
الـ effects مخرج طوارئ، وأكثر أخطائها شيوعًا تأتي من استخدامها حيث لا حاجة إليها. قبل أن تكتب واحدًا، افحص هذه الحالات الثلاث.
\nحساب شيء من الـ props أو الـ state. القوائم المصفّاة والأعداد والنصوص المنسّقة تُحسب أثناء الـ render. تخزينها في الـ state ومزامنتها بـ effect يضيف render إضافيًا ببيانات قديمة، ومزيدًا من الـ state الذي قد ينحرف.
\nالاستجابة لإجراء من المستخدم. إذا كان يجب أن يُنفَّذ الكود لأن المستخدم نقر Add، فضعه في معالج الإرسال. الـ effect الذي يراقب movies لا يستطيع التمييز بين الإضافة والحذف وإعادة التحميل.
إعادة ضبط الـ state حين يتغيّر prop. بدل effect يمسح مسوّدة حين تتغيّر movieId، امنح الـ component قيمة key: <NotesEditor key={movieId} />. الـ key الجديد يعني component جديدًا بـ state جديد.
وما يتبقّى هو التزامن الحقيقي: واجهات المتصفّح، والتخزين، والمؤقّتات، والاشتراكات، واتصالات الشبكة. قائمة قصيرة، وهي القائمة الصحيحة.
\n\n\nبهذا يكتمل جوهر React: الـ components والـ props والـ state والأحداث والـ effects. في القسم التالي تجمع كل القطع في Watchlist المكتمل، وتنسّقه، وتنشره.
\n","toc":[{"id":"sec-1","text":"أول effect لك","level":2},{"id":"sec-2","text":"التنظيف","level":2},{"id":"sec-3","text":"لماذا يعمل مرتين في وضع التطوير","level":3},{"id":"sec-4","text":"حفظ Watchlist في localStorage","level":2},{"id":"sec-5","text":"قد لا تحتاج إلى effect","level":2}],"takeaways":["يعمل الـ effect بعد أن تحدّث React الشاشة، ووظيفته التزامن مع شيء خارج React، مثل عنوان المستند أو localStorage أو المؤقّتات أو الاشتراكات.","تسرد مصفوفة الاعتماديات كل قيمة من الـ component يقرؤها الـ effect؛ وتعيد React تشغيل الـ effect حين تتغيّر إحداها.","أرجِع دالة تنظيف (cleanup) تلغي ما فعله الـ effect؛ تشغّلها React قبل التشغيل التالي وعند إلغاء التركيب.","في وضع التطوير، يشغّل StrictMode كل effect، ثم دالة تنظيفه، ثم الـ effect من جديد، ليثبت أن التنظيف يعمل.","إذا كان يمكن حساب القيمة من الـ props أو الـ state، أو كان التغيير ناتجًا عن إجراء محدّد من المستخدم، فلا تحتاج إلى effect."],"further":[{"title":"Synchronizing with Effects","url":"https://react.dev/learn/synchronizing-with-effects"},{"title":"You Might Not Need an Effect","url":"https://react.dev/learn/you-might-not-need-an-effect"},{"title":"useEffect reference","url":"https://react.dev/reference/react/useEffect"}],"quiz":[{"q":"تُحفظ visibleMovies في الـ state وتُحدَّث بـ useEffect(() => setVisibleMovies(movies.filter(…)), [movies, filter]). ما النهج الأفضل؟
const visibleMovies = movies.filter(…).","why":"صحيح. إنها بيانات مشتقّة. نسخة الـ effect ترسم مرة ببيانات قديمة، ثم مرة أخرى بالبيانات الصحيحة، وتضيف state قد ينحرف."},{"text":"أضف visibleMovies إلى مصفوفة الاعتماديات أيضًا.","why":"هذا يجعل الـ effect يعيد التشغيل كلما ضبط مخرجاته بنفسه، فيفتح الباب لحلقة لا نهائية. الحلّ الحقيقي حذف الـ effect."},{"text":"انقل الفلترة إلى setTimeout داخل الـ effect.","why":"تأخير العمل يطيل عمر الـ render القديم. لا شيء هنا يحتاج إلى effect."}],"answer":0},{"q":"في وضع التطوير، effect يطبع «subscribed» وله دالة تنظيف تطبع «unsubscribed»، يطبع عند تحميل الصفحة «subscribed, unsubscribed, subscribed». ما الذي يحدث؟
","options":[{"text":"مصفوفة الاعتماديات غائبة، فيعمل الـ effect بعد كل render.","why":"من دون مصفوفة يُعاد تشغيل الـ effect بعد كل re-render، لكن تحميل الصفحة العادي فيه render واحد، فلا يفسّر ذلك وحده تنظيفًا مباشرًا بعد التشغيل الأول."},{"text":"يُرسم الـ component مرتين بسبب خطأ في الأب.","why":"هذا التسلسل بعينه مقصود، ولا يحدث إلا في وضع التطوير."},{"text":"يشغّل React 19 الـ effects مرتين دائمًا، في الإنتاج أيضًا.","why":"الدورة الإضافية فحص خاص بالتطوير من StrictMode. في الإنتاج يعمل الـ effect مرة واحدة."},{"text":"يركّب StrictMode الـ component ثم يلغي تركيبه ثم يركّبه من جديد أثناء التطوير، ليتحقّق أن التنظيف يلغي الـ effect بالكامل.","why":"صحيح. إذا تصرّف تطبيقك بالطريقة نفسها بعد هذه الدورة، فدالة التنظيف صحيحة. وإن انكسر، فالخطأ كان سيظهر في الإنتاج عاجلًا أم آجلًا."}],"answer":3},{"q":"ما الخطأ في هذا الـ effect؟
\nuseEffect(() => {\n document.title = `${left} to watch`;\n}, []);document.title من React.","why":"ضبط عنوان المستند استخدام كلاسيكي وصحيح للـ effect؛ إنه API من المتصفّح خارج React."},{"text":"يقرأ left لكنه لا يسردها، فيُضبط العنوان مرة واحدة ولا يتحدّث أبدًا حين تتغيّر left.","why":"صحيح. المصفوفة الفارغة تعني «شغّل بعد الـ render الأول فقط». اسرد كل قيمة يقرؤها الـ effect، [left]، وستذكّرك قاعدة الـ lint بذلك."},{"text":"يحتاج إلى دالة تنظيف وإلا رمت React خطأ.","why":"التنظيف اختياري. كثير من الـ effects، مثل هذا، لا يوجد ما تلغيه."},{"text":"الـ template literals لا تعمل داخل الـ effects.","why":"الـ effect دالة عادية؛ أي JavaScript تعمل بداخلها."}],"answer":1},{"q":"بعد إضافة فيلم تريد عرض رسالة «Movie added». أين يجب أن يوضع الكود الذي يعرضها؟
","options":[{"text":"في effect يراقبmovies ويعرض الرسالة كلما تغيّرت.","why":"تتغيّر القائمة أيضًا حين تحذف أفلامًا أو تبدّل حالتها أو تحمّلها، فستظهر الرسالة في أوقات خاطئة."},{"text":"في effect بمصفوفة اعتماديات فارغة.","why":"هذا يعمل مرة واحدة بعد الـ render الأول، قبل أن يضيف أحد أي فيلم بوقت طويل."},{"text":"في معالج الإرسال، في المكان نفسه الذي يُضاف فيه الفيلم.","why":"صحيح. الرسالة ناتجة عن إجراء محدّد من المستخدم، فمكانها معالج ذلك الإجراء، لا effect."}],"answer":2}],"exercise":{"kind":"web","mode":"react","starter":{"jsx":"import { useEffect, useState } from 'react';\n\n// The page's own title, before the Watchlist changes it.\ndocument.title = 'Playground';\n\nconst INITIAL = [\n { id: 'a1', title: 'Arrival', watched: true },\n { id: 'p2', title: 'Past Lives', watched: false },\n { id: 'd3', title: 'Dune: Part Two', watched: false },\n];\n\nfunction Watchlist() {\n const [movies, setMovies] = useState(INITIAL);\n const [left, setLeft] = useState(0);\n\n // 1. This Effect only copies derived data into state. Replace it.\n useEffect(() => {\n setLeft(movies.filter((m) => !m.watched).length);\n }, [movies]);\n\n // 2. Sync document.title, and restore the old title on cleanup.\n\n function toggle(id) {\n setMovies(movies.map((m) => (m.id === id ? { ...m, watched: !m.watched } : m)));\n }\n\n return (\n {left} to watch
\n{left} to watch
\nمهمّتان في Watchlist:
left إلى الـ state بواسطة effect. احسبها أثناء الـ render بدلًا من ذلك.document.title هي 2 to watch · Watchlist (بالرقم الحقيقي)، وأن تتحدّث حين يُعلَّم فيلم كمُشاهَد. وحين يُزال Watchlist (انقر Hide watchlist)، يجب أن يعود العنوان إلى ما كان عليه قبل ذلك، أي Playground.left والـ effect الخاص به بـ const left = movies.filter((m) => !m.watched).length;","يقرأ effect العنوان القيمة left، فتكون مصفوفة اعتمادياته [left].","احفظ العنوان القديم داخل الـ effect (const previous = document.title;) وأرجِع دالة تنظيف تعيده."],"explanation":"القيمة left مشتقّة من movies، فتُحسب أثناء الـ render. أمّا نسخة الـ effect فكانت ترسم مرة بعدد خاطئ هو 0 ثم مرة أخرى بالعدد الصحيح. في المقابل، يعيش عنوان المستند خارج React، فمزامنته effect حقيقي. سرد [left] يعيد تشغيله فقط حين يتغيّر العدد، ودالة التنظيف تعيد العنوان السابق قبل كل إعادة تشغيل وحين يُلغى تركيب الـ component. وهذا بالضبط ما يختبره فحص StrictMode (تركيب، تنظيف، تركيب) أثناء التطوير.