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

المدونة

إزاي OAuth بيشتغل

يونيو 29, 2025

إزاي OAuth بيشتغل؟ OAuth هو بروتوكول بيخلّي التطبيقات تقدر تدخل على بياناتك بطريقة آمنة من غير ما تدّيهم الباسورد بتاعك. زي مثلًا لو حبيت تطبيق ينشر...

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

يوليو 02, 2025

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

دليل للأنيميشن المتحركة بالسكّول بس بـ CSS

يونيو 26, 2025

دليل للأنيميشن المتحركة بالسكّول بـ CSS دلوقتي تقدر تربط الأنيميشن بتاعتك بـ السكّول من غير جافاسكريبت — كله CSS بحت. 1. التلات مكونات بتوع...

مقارنة CSS: طبقات vs BEM vs Utility Classes

يونيو 26, 2025

مقارنة CSS: Cascade Layers و BEM و Utility Classes المقالة بتتكلّم عن ٣ طرق لإدارة الـ specificity في CSS – BEM والـ utility‑first classes وك...

تحديث Laravel 12.18.0

يونيو 17, 2025

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

إتقان التحقق الشرطي في Laravel 12

يوليو 07, 2025

إتقان التحقق الشرطي في Laravel 12 في Laravel 12، نظام التحقق (validation) قوي جدًا، وميزة التحقق الشرطي بتخليك تتحكم في القوانين بتاعتك ب...