شرح مفصل لكل هوك في React

يوليو 1, 2025

🎣 شرح React Hooks وبأمثلة عملية

🧠 useState

بيعمل إيه: بيضيف حالة داخلية (state) جوا أي مكون شغال بوظيفة.

مثال عملي:


import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      ضغطت {count} مرة
    </button>
  );
}

أهميته: دي أبسط وأهم طريقة تتعامل بيها مع البيانات اللي بتتغير في الواجهة زي عداد أو قيمة فورم.

⚙️ useReducer

بيعمل إيه: بيخليك تتحكم في حالة معقدة شوية عن طريق دالة بتعالج الحالات (reducer).

مثال عملي:


const reducer = (state, action) => {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    default: return state;
  }
};

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <div>
      <p>العدد: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })>-</button>
    </div>
  );
}

أهميته: مثالي لما يكون عندك أكشنز كتير بتغير نفس الحالة زي فورمات أو إعدادات.

🔁 useEffect

بيعمل إيه: بيشغّل كود بعد الريندر، زي الاتصال بـ API أو تعديل الـ DOM أو إضافة event listener.

مثال عملي:


useEffect(() => {
  document.title = `ضغطت ${count} مرة`;
}, [count]);

أهميته: بيستبدل lifecycle methods اللي كانت موجودة في الكمبوننتات الكلاسيكية (class components).

📐 useLayoutEffect

بيعمل إيه: شبه useEffect بس بيشتغل قبل ما المتصفح يرسم الشاشة (paint)، بعد التعديلات على DOM مباشرة.

مثال عملي:


useLayoutEffect(() => {
  console.log("الـ DOM اتعدل قبل ما الشاشة ترسم");
}, []);

أهميته: مفيد لو بتقيس حجم عنصر أو بتعدل حاجة مرئية ولازم يتم قبل الرسم لتفادي الـ flicker.

🧵 useInsertionEffect

بيعمل إيه: بيضيف ستايلات أو بيعدل CSS قبل ما يحصل layout من المتصفح.

مثال عملي:


useInsertionEffect(() => {
  // إضافة ستايلات قبل الرسم
}, []);

أهميته: نادر الاستخدام، غالبًا في مكتبات الـ CSS-in-JS زي Emotion أو styled-components.

🌍 useContext

بيعمل إيه: بيخليك توصل لقيم من Context من غير ما تمرر props لكل مكون.

مثال عملي:


const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>أنا واخد الـ Theme من Context</button>;
}

أهميته: بيسهل مشاركة بيانات عامة زي الـ Theme أو المستخدم أو اللغة من غير لف props كتير.

🧭 useRef

بيعمل إيه: بيخزن قيمة أو بيربط بعنصر DOM وبيفضل ثابت بين الرندرات.

مثال عملي:


function FocusInput() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>ركّز في الـ input</button>
    </>
  );
}

أهميته: ممتاز للتعامل مع عناصر في الـ DOM مباشرة زي الفوكس أو الاسكرول.

🔧 useImperativeHandle

بيعمل إيه: بيخليك تتحكم في القيمة اللي بتتبعت من ref لما تستخدم forwardRef.

مثال عملي:


const FancyInput = React.forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} />;
});

أهميته: مفيد في المكونات الجاهزة اللي بتحب تعرض API خاص بالتحكم فيها من بره.

📦 useMemo

بيعمل إيه: بيحسب قيمة تقيلة مرة واحدة وبيخزنها لو الـ dependencies ما اتغيرتش.

مثال عملي:


const expensiveCalculation = (num) => {
  console.log('بحسب...');
  return num * 2;
};

function App({ number }) {
  const result = useMemo(() => expensiveCalculation(number), [number]);
  return <p>النتيجة: {result}</p>;
}

أهميته: بيزود الأداء ويقلل الحسابات التقيلة في كل رندر.

🔁 useCallback

بيعمل إيه: بيرجع نسخة محفوظة (memoized) من فانكشن، ومش بيغيرها غير لما الـ dependencies تتغير.

مثال عملي:


const handleClick = useCallback(() => {
  console.log('تم الضغط!');
}, []);

أهميته: مهم جدًا لما تبعت فانكشن كـ prop لمكون تاني عشان ميعيدش الرندر على الفاضي.

🚀 useTransition

بيعمل إيه: بيخليك تحدد جزء من التحديثات إنه "مش مستعجل"، عشان تخلي الـ UI أسرع.

مثال عملي:


const [isPending, startTransition] = useTransition();

const handleChange = (e) => {
  const input = e.target.value;
  startTransition(() => {
    setSearchTerm(input);
  });
};

أهميته: مثالي في السرش أو التنقلات اللي ممكن تبطّأ الـ UI لو اتنفذت فورًا.

🐢 useDeferredValue

بيعمل إيه: بيأجل تحديث قيمة معينة عشان الـ React يقدر يرندر الحاجات المهمة الأول.

مثال عملي:


const deferredSearchTerm = useDeferredValue(searchTerm);

const filteredResults = useMemo(() => {
  return items.filter(item => item.includes(deferredSearchTerm));
}, [deferredSearchTerm]);

أهميته: بيحسن الأداء لما يكون عندك لستة كبيرة أو مكونات تقيلة بتترندر على حسب إدخال المستخدم.

🆔 useId

بيعمل إيه: بيولد ID فريد لأي عنصر، وده مهم جدًا للـ accessibility.

مثال عملي:


const id = useId();

return (
  <>
    <label htmlFor={id}>الإيميل</label>
    <input id={id} type="email" />
  </>
);

أهميته: بيمنع تكرار الـ IDs لما يكون عندك أكتر من عنصر أو مكون بيتكرر.

🐞 useDebugValue

بيعمل إيه: بيعرض معلومات إضافية عن الهوك في React DevTools لما تستخدم هوك مخصص.

مثال عملي:


function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);
  useDebugValue(isOnline ? 'متصل' : 'مش متصل');
  return isOnline;
}

أهميته: بيساعدك أثناء التطوير تشوف الحالة جوه DevTools.

🔄 useSyncExternalStore

بيعمل إيه: بيخليك تشترك في Store خارجي زي Redux أو أي مكتبة خارجية بشكل آمن ومتوافق مع Concurrent Mode.

مثال عملي:


const state = useSyncExternalStore(store.subscribe, store.getSnapshot);

أهميته: ده البديل الرسمي لـ useEffect في التعامل مع Stores خارجية في React 18 وما بعدها.

🎯 useActionState

بيعمل إيه: بيتعامل مع الحالة اللي بتتغير بناءً على Action زي إرسال فورم (تجريبي في React 18+).

مثال عملي:


const [state, formAction] = useActionState(
  async (prevState, formData) => {
    const res = await submitToServer(formData);
    return res;
  },
  {}
);

أهميته: مفيد في الفورمات اللي فيها رد فعل من السيرفر وبتحتاج تخزين نتيجة.

📤 useFormStatus

بيعمل إيه: بيراقب حالة الفورم لو لسه بيبعت أو خلص.

مثال عملي:


const { pending } = useFormStatus();

return (
  <button disabled={pending}>
    {pending ? 'جاري الإرسال...' : 'إرسال'}
  </button>
);

أهميته: ممتاز لعمل UX أحسن للمستخدم أثناء إرسال البيانات.

📝 useFormState

بيعمل إيه: بيخليك تدير حالة الفورم اللي بتتبعت من السيرفر (ضمن خواص React التجريبية).

مثال عملي:


const [state, formAction] = useFormState(actionFn, initialState);

أهميته: بيساعدك تحتفظ بالـ logic بتاع الفورم كله في مكان واحد.

المدونة

الفرق بين Redux, Context & React Components في إدارة الحالة

أغسطس 06, 2025

عند بناء تطبيقات باستخدام React، هناك حاجة إلى إدارة البيانات التي تتغير نتيجة تفاعل المستخدم أو جلب البيانات من مصادر خارجية. توجد ثلاث وسائل رئيسي...

تاريخ React – استعراض شامل وتحليل تقني

يوليو 26, 2025

1. البدايات: النشأة داخل Facebook في عام 2011، واجه مهندسو Facebook تحديًا متزايدًا في صيانة واجهات المستخدم المعقدة والتفاعلية. تم تطوير مكتبة د...

وقّف نسخ الكود! اتعلم تستخدم Traits في Laravel صح

يوليو 01, 2025

🚫 وقّف نسخ الكود! لو عندك نفس المنطق في كذا Model أو Controller زي Slug أو Logging، Traits في Laravel هتوفر عليك تعب الكتابة والتكرار. 1. إيه هو...

البرمجة الكائنية (OOP) – المفاهيم الأساسية

أغسطس 09, 2025

البرمجة الكائنية التوجه (Object Oriented Programming - OOP) هي أسلوب حديث في تطوير البرمجيات يُقسّم التطبيق إلى وحدات تسمى كائنات (Objects) تتفاعل م...

مقارنة بين Scopes + Traits × UseEloquentBuilder في Laravel

يوليو 13, 2025

في Laravel، بنحتاج دايمًا نكتب استعلامات شبه بعض في أكتر من مكان. Laravel بتوفر طريقتين أساسيين نقدر نستخدمهم علشان نرتّب الاستعلامات دي: Scopes + Tra...

تجاوز $fillable بأمان باستخدام forceFill() في Laravel

يوليو 02, 2025

تجاوز $fillable بأمان باستخدام forceFill() في Laravel جربت تستخدم create() في Laravel ولاقيت إن حقول زي role أو status مش بتتحفظ؟ ده بسبب حماية Larav...