اسئله (React.js):
-
⚛️ إيه الفرق بين الـ Class Components والـ Functional Components؟
زمان React كان بيعتمد على الـ Class Components لإنها بتدعم الـ state والـ lifecycle methods، بس بعد ظهور الـ Hooks في React 16.8، بقت Functional Components هي الأفضل لإنها أخف وأبسط، وبتستخدم الـ useState و useEffect بدل الـ this.state والـ componentDidMount، وده بيسهل الشغل وبيقلل الكود اللي بتكتبه.
-
⚛️ إيه الفرق بين useState و useReducer؟ وامتى تستخدم كل واحد؟
- useState: أبسط وسيلة لتخزين البيانات في state، مناسبة للحالات البسيطة زي إدارة قيمة input أو toggle بين حالتين.
- useReducer: شبه Redux، مناسب أكتر لما يكون عندك state معقدة فيها أكشنز كتير ومترابطة، زي إدارة form كبير أو التعامل مع data fetched من API.
لو الـ state عندك بسيطة
→ استخدم useState
ولو فيها أكشنات وتعديلات كتير
→ استخدم useReducer -
⚛️ إيه الفرق بين useEffect و useLayoutEffect؟
الاتنين بيستخدموا لتنفيذ أكشن بعد الـ render، بس الفرق في التوقيت:
- useEffect بيشتغل بعد ما React يرسم الـ UI.
- useLayoutEffect بيشتغل قبل ما المتصفح يرسم الصفحة، وده مفيد لما تكون عايز تعدل في الـ DOM مباشرة عشان تتجنب الـ flickering.
باختصار:
- ✔️ لو الحاجة مش بتأثر على شكل الواجهة → استخدم useEffect
- ✔️ لو بتعدل على DOM زي تعديل أبعاد عنصر → استخدم useLayoutEffect
-
⚛️ إيه المشاكل اللي ممكن تحصل بسبب الـ Virtual DOM؟
رغم إن Virtual DOM بيحسن الأداء، إلا إنه ممكن يسبب مشاكل زي:
- Re-render زيادة عن اللزوم: لو مفيش Memoization (زي React.memo و useMemo)، المكونات ممكن تعيد الـ render حتى لو مفيش تغيير.
- Delay في الـ UI Updates: أوقات React بيعمل batch updates، فالتغيرات مش بتظهر في نفس اللحظة، وده ممكن يسبب lag.
- مشاكل في التعامل مع الـ refs: لو عدلت على DOM مباشرة، ممكن يحصل تضارب مع تحديثات الـ Virtual DOM.
-
⚛️ إيه الفرق بين Client-Side Rendering (CSR) و Server-Side Rendering (SSR) و Static Site Generation (SSG)؟
-
Client-Side Rendering (CSR)
- الصفحة بتتحمل الأول وبعد كده React يجيب الداتا من الـ API ويحدث الواجهة.
- سريع بعد التحميل الأول، بس ممكن يكون بطيء في الـ SEO.
-
Server-Side Rendering (SSR)
- الصفحة بتتحمل من السيرفر ومعاها الداتا، فالمستخدم بيشوف المحتوى أسرع.
- كويس للـ SEO بس أبطأ من CSR لو فيه ترافيك عالي.
-
Static Site Generation (SSG)
- الصفحات بتتولد وقت الـ build، فبتتحمل بسرعة رهيبة.
- ممتاز للمدونات والمواقع اللي محتواها مش بيتغير كتير.
- لو محتاج أداء وسرعة مع SEO → استخدم SSR أو SSG
- لو الموقع ديناميكي جدًا ومحتاج SPA → استخدم CSR
-
-
⚛️ إيه الفرق بين Controlled و Uncontrolled Components؟
- Controlled Component: React هو اللي بيتحكم في الـ state بتاعة الـ input عن طريق useState أو useReducer.
- Uncontrolled Component: الـ state بتكون جوا الـ DOM نفسه وبتتعامل معاها بالـ ref.
- لو عايز مرونة أكتر في التعامل مع القيم → استخدم Controlled
- لو بتتعامل مع فورمات كبيرة أو محتاج السرعة → استخدم Uncontrolled
-
⚛️ إزاي تتعامل مع Memory Leaks في React؟
- Cleanup الـ Effects باستخدام return جوا useEffect.
- التأكد من إلغاء الـ setTimeout و setInterval لما الـ component يتشال.
- استخدام AbortController مع الـ fetch عشان تلغي الـ API request لما المكون يختفي.
- تجنب تخزين داتا ضخمة في state، واستخدم context أو local storage لو محتاجها بعدين.
-
⚛️ إزاي تعمل Performance Optimization في React؟
- استخدم useCallback و useMemo لتثبيت الـ functions والـ objects.
- استخدم lazy loading عشان تحمل المكونات عند الحاجة بس.
- تجنب Re-render الكتير عن طريق استخدام keys صحيحة وعمل shouldComponentUpdate أو React.PureComponent لو كنت شغال بـ Class Components.
- Split الكود (Code-Splitting) باستخدام React.lazy و Suspense عشان تحمل بس الأجزاء المطلوبة من الصفحة.
المشاركة مع أصدقائك
قسم التعليقات