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

المدونة

Laravel 12.19: استخدام Attributes لتنظيم الـ Query Builder

يوليو 07, 2025

Laravel 12.19: استخدام Attributes تنظّم Query Builder في Laravel 12.19، دلوقتي تقدر تستخدم Attribute اسمه #[UseEloquentBuilder] علشان تحدد Query Bu...

ألوان في CSS - شرح مبسّط

يونيو 26, 2025

ألوان في CSS - شرح مبسّط النهارده هنتكلم عن الألوان في CSS: ازاي بنحددها، وخصوصًا الطرق الحديثة زي lab() وoklch(). 1. يعني إيه لون؟ مفيش حاجة اسم...

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

يوليو 26, 2025

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

تذكير بالمهام مع Laravel وMongoDB

يونيو 30, 2025

📌 بناء تطبيق تذكير مهام المقال ده بيشرح إزاي نعمل تطبيق Laravel يستخدم MongoDB علشان يذكرك بالمهمات بتاعتك، مع تسجيل دخول، CRUD، وتذكير بالإيميلات...

React Native 0.80 وExecuTorch: بداية قوية للذكاء الاصطناعي المحلي في تطبيقات الموبايل

يوليو 28, 2025

🚀 الجديد في React Native 0.80 بالتفصيل الإصدار React Native 0.80 يعتبر نقطة تحول حقيقية في عالم تطوير تطبيقات الموبايل باستخدام React Native. التح...

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

يوليو 02, 2025

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