أسئلة React وFrontend في الإنترفيو 2026

💡لو ناوي تدخل إنترفيو React أو Frontend Developer، فـ لازم تعرف إن الموضوع مش بس أساسيات زي JSX أو Hooks…
الإنترفيوهات اللي بجد بتقيس مدى فهمك للتفاصيل الصغيرة اللي بتفرق بين مبرمج عادي ومبرمج محترف 💪

علشان كده، جمعتلك في البوست ده أشهر الأسئلة اللي بتتكرر في كل إنترفيوهات React وPerformance، مع شوية شرح بسيط ونصائح من خبرة ناس كتير عدّوا بالمراحل دي 👇

---

الفرق بين useMemo و useCallback​

الاتنين بيستخدموا علشان يحسّنوا الأداء، بس كل واحد ليه استخدام مختلف 👇

• useMemo: بيخزّن نتيجة دالة (function result) علشان ما تتحسبش كل مرة.
• useCallback: بيخزّن نفس الدالة (function نفسها) علشان ما تتغيرش إلا لما الـ dependencies تتغير.

📘 مثال بسيط:

const calculate = useMemo(() => heavyFunction(data), [data]);
const handleClick = useCallback(() => setCount(count + 1), [count]);

---

المشاكل اللي بتحصل مع Context API​

لو استخدمته في كل حتة في التطبيق، ممكن يسبب re-renders كتير جدًا 🔁
الحل؟ استخدم مكتبات زي Zustand أو Jotai لما يكون عندك state كبيرة ومتفرعة.

---

الفرق بين React Reconciliation و Fiber Architecture​

• Reconciliation: هي الطريقة اللي React بيقارن بيها الـ Virtual DOM مع الـ Real DOM.
• Fiber: ده هو النظام الداخلي الجديد اللي React بيستخدمه علشان يخلي التحديثات أسرع ومرنة أكتر ⚡

---

يعني إيه Concurrent Mode وليه مهم؟​

ده بيسمح لـ React إنها تـ"يقطع" الـ rendering ويرجع له بعدين، يعني التطبيق يفضل سريع حتى مع العمليات التقيلة.

---

إدارة الـ State المعقدة جدًا​

لو التطبيق كبير، استخدم Redux Toolkit أو Zustand.
لكن لو بسيط، كفاية Context + useReducer 💼

---

الفرق بين Server Components و Client Components (في React 18)​

• Server Components: بيتنفذوا في السيرفر، ومش بيزودوا حجم الباندل.
• Client Components: بيتنفذوا في المتصفح وبيتعاملوا مع الواجهة مباشرة 👨‍💻

---

Controlled vs Uncontrolled Components​

الـ Controlled بيكون ليه State جوه React.
الـ Uncontrolled بيستخدم ref علشان ياخد القيمة من الـ DOM مباشرة.

---

يعني إيه Prop Drilling وإزاي تتجنبه؟​

ده لما تبعت props من أب لـ ابن لـ حفيد لمجرد إنك محتاجها تحت.
الحل؟ استخدم Context API أو state management library زي Redux.

---

Error Boundaries​

بتحمي التطبيق من الكراش لو حصل خطأ في component معين.

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  componentDidCatch() { this.setState({ hasError: true }); }
  render() { return this.state.hasError ? <h2>😅 حصل خطأ!</h2> : this.props.children; }
}

---

الفرق بين Virtual DOM و Real DOM​

الـ Virtual DOM نسخة خفيفة بتقلل التحديثات على الـ Real DOM،
وده بيخلي الأداء أسرع بكتير 🚀

---

الفرق بين Code Splitting و Tree Shaking​

• Code Splitting: بيقسم الكود لملفات صغيرة تُحمّل وقت الحاجة.
• Tree Shaking: بيشيل الكود اللي مش مستخدم في الـ build النهائي 🌲

---

تقليل الـ Rerenders​

استخدم React.memo أو useMemo/useCallback لتقليل إعادة الرسم غير الضرورية.

---

الفرق بين Memoization و Caching​

• Memoization: بيخزّن نتيجة الدالة داخل الكود نفسه.
• Caching: بيخزّنها في مكان خارجي (browser أو API).

---

استخدام React Profiler​

أداة قوية تقدر تفتحها من DevTools وتشوف إيه اللي بيخلي الكومبوننت تعمل rerender كتير 👀

---

الفرق بين CSR, SSR, و ISR في Next.js​

• CSR: كله بيشتغل في المتصفح.
• SSR: السيرفر هو اللي بيرندر الصفحات.
• ISR: مزيج ذكي منهم الاتنين لتسريع الأداء ⚡

---

تحسين Core Web Vitals (LCP, FID, CLS)​

ركز على:

• ضغط الصور WebP
• Lazy loading
• تقليل JavaScript التقيل

---

الفرق بين Debouncing و Throttling​

// Debounce example
function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

• Debounce: بيأخر التنفيذ لحد ما المستخدم يوقف الكتابة.
• Throttle: بيحدد عدد المرات اللي الدالة تشتغل فيها كل فترة ⏱️

---

التعامل مع Caching Layers​

• Browser Cache للملفات الثابتة
• CDN Cache لتقليل زمن التحميل
• Service Workers لتخزين البيانات Offline 💾

---

Hydration Errors في Next.js​

بتحصل لما يكون HTML اللي جا من السيرفر غير اللي React بيرسمه في الكلاينت.
الحل؟ خلي كل client-only code جوه شرط typeof window !== "undefined".

---

⚡ أسئلة JavaScript المتقدمة

الفرق بين Event Bubbling و Event Capturing​

ببساطة:

• Capturing: من الأب للابن
• Bubbling: من الابن للأب

---

Garbage Collector بيشتغل إزاي؟​

بيمسح القيم اللي ملهاش مراجع في الذاكرة تلقائيًا 🧹

---

WeakMap vs Map​

• WeakMap: المفاتيح لازم تكون objects، وبتتحذف أوتوماتيك.
• Map: أي نوع ينفع يكون key.

---

Async-Friendly Code​

استخدم async/await، وإقفل أي connection أو timer بعد الاستخدام.

---

الفرق بين == و ===​

• == بيعمل مقارنة بعد تحويل النوع
• === بيقارن النوع والقيمة معًا (استخدمه دايمًا ✅)

---

Execution Context و Call Stack​

• Execution Context: بيحدد الكود اللي بيشتغل دلوقتي.
• Call Stack: بيخزن ترتيب تنفيذ الدوال 🧩

---

var, let, const​

استخدم const للحاجات الثابتة وlet للباقي، ومتستخدمش var خالص 😅

---

Shallow Copy vs Deep Copy​

const obj = { name: "Ali", address: { city: "Cairo" } };
const shallow = { ...obj };
const deep = structuredClone(obj);

الأول بينسخ السطح بس، التاني بينسخ كل الطبقات 🧠

---

إزاي this بيشتغل في JavaScript​

• جوه function عادية: بتشير للـ window.
• جوه object method: بتشير للـ object نفسه.
• جوه arrow function: بتورثها من السياق الخارجي.

---

Event Loop ببساطة​

ده المسئول عن تنفيذ الـ callbacks بترتيبها.
يعني هو اللي بيخلي JavaScript single-threaded بس سريع جدًا ⚡

---

💬 في النهاية​

لو قدرت تجاوب على الأسئلة دي بثقة وتشرحها كأنك بتعلّم حد تاني،
فـ صدقني إنت جاهز لأي إنترفيو React أو Frontend 👏

واكتب في الكومنتس إيه أكتر سؤال شوفته في إنترفيو وكنت مش متوقعه 😅