شرح مفصل لكل هوك في 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 بتاع الفورم كله في مكان واحد.

المدونة

استخدام useCallback في React: الفوائد، القيود، والممارسات المثالية

يوليو 31, 2025

Hook useCallback في React يُستخدم لإنشاء نسخة ثابتة من دالة (callback) بحيث لا يُعاد إنشاؤها إلا إذا تغيرت الـ dependencies المحددة. الهدف الأساسي م...

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

يوليو 26, 2025

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

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

أغسطس 09, 2025

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

تعزيز PHP Enums باستخدام archtechx/enums

يوليو 01, 2025

تعزيز PHP enums باستخدام حزمة archtechx/enums من PHP 8.1، ظهر نوع جديد اسمه “enums” بيخليك تعرف قيم ثابتة بأسماء مرمّزة زي statuses...

لارافيل 12.16.0 - مميزات جديدة للمطورين

يونيو 03, 2025

لارافيل 12.16.0 - مميزات جديدة للمطورين 1. قاعدات تحقق جديدة: in_array_keys دلوقتي تقدر تتحقق إن الأراي فيه على الأقل مفتاح واحد من اللي انت محددهم...

أحدث مميزات ECMAScript 2025

يونيو 30, 2025

أحدث مميزات ECMAScript 2025 في 25 يونيو 2025، تم اعتماد ES2025 رسميًا. الإضافات الجاية هتسهل عليك كتابة الكود: 1. 📦 Import Attributes و JSON Module...