شرح مفصل لكل هوك في 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) قوي جدًا، وميزة التحقق الشرطي بتخليك تتحكم في القوانين بتاعتك ب...
