شرح مفصل لكل هوك في 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 Toolkit 2.9.0 - شرح التحديثات وتحسينات RTK Query بالتفصيل

فبراير 05, 2026

شرح تحديث Redux Toolkit 2.9.0 إصدار Redux Toolkit 2.9.0 ركّز بشكل أساسي على تحسين أداء RTK Query، وتنظيم طريقة التعامل مع الطلبات غير المتزامنة (...

تحديث Laravel 12.18.0

يونيو 17, 2025

تحديث Laravel 12.18.0 صدر نسخه Laravel 12.18.0 فيها شوية ميزات جامدة كده: توابع لتشفير وفك تشفير النصوص باستخدام Stringable ديركت في chain strings...

الدليل الكامل لتحديثات ECMAScript 2025 للمطورين

يوليو 06, 2025

📘 شرح تفصيلي لتحديثات ECMAScript 2025 جميع مميزات ECMAScript 2025، مع أمثلة عملية وفهم ليه الميزة دي مهمة لأي مبرمج واجهة أمامية. ١. مجموعات مسما...

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

يوليو 02, 2025

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

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

يوليو 01, 2025

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

نظام طوابير Laravel واستخدام Supervisor في الإنتاج

يوليو 01, 2025

🚀 نظام Queue & Jobs في Laravel هناخدك خطوة خطوة من أول إنشاء الجداول لحد ما تشغّل الطوابير في Production عن طريق Supervisor. الخطوة 1: إنشاء...