Custom Hooks في React: منطق قابل لإعادة الاستخدام من قلب المشاريع الحقيقية

// Custom Hook لقياس حجم النافذة
import { useState, useEffect } from 'react';

function useWindowSize() {
 const [size, setSize] = useState({
 width: window.innerWidth,
 height: window.innerHeight,
 });

 useEffect(() => {
 const handleResize = () => {
 setSize({
 width: window.innerWidth,
 height: window.innerHeight,
 });
 };

 window.addEventListener('resize', handleResize);
 // تنظيف الحدث عند إلغاء المكون
 return () => window.removeEventListener('resize', handleResize);
 }, []); // مصفوفة الاعتمادات فارغة = تشغيل مرة واحدة

 return size;
}

// استخدام في المكون
function ResponsiveComponent() {
 const { width } = useWindowSize();
 return <div>عرض النافذة: {width} بكسل</div>;
}

// Custom Hook لإدارة الـ Form مع Yup
import { useState } from 'react';
import * as yup from 'yup';

function useFormHandler(initialValues, schema) {
 const [values, setValues] = useState(initialValues);
 const [errors, setErrors] = useState({});
 const [isSubmitting, setIsSubmitting] = useState(false);

 const validate = async () => {
 try {
 await schema.validate(values, { abortEarly: false });
 setErrors({});
 return true;
 } catch (err) {
 const newErrors = {};
 err.inner.forEach((error) => {
 newErrors[error.path] = error.message;
 });
 setErrors(newErrors);
 return false;
 }
 };

 const handleChange = (e) => {
 const { name, value } = e.target;
 setValues({
 ...values,
 [name]: value,
 });
 };

 const handleSubmit = (onSubmit) => async (e) => {
 e.preventDefault();
 setIsSubmitting(true);
 const isValid = await validate();
 if (isValid) {
 await onSubmit(values);
 }
 setIsSubmitting(false);
 };

 return {
 values,
 errors,
 isSubmitting,
 handleChange,
 handleSubmit,
 };
}

// مثال على الاستخدام
const schema = yup.object().shape({
 email: yup.string().email().required(),
 password: yup.string().min(8).required(),
});

function LoginForm() {
 const { values, errors, isSubmitting, handleChange, handleSubmit } = 
 useFormHandler({ email: '', password: '' }, schema);

 const  async (values) => {
 await fetch('/api/login', {
 method: 'POST',
 body: JSON.stringify(values),
 });
 };

 return (
 <form onSubmit={handleSubmit(onSubmit)}>
 <input
 name="email"
 value={values.email}
 onChange={handleChange}
 />
 {errors.email && <div>{errors.email}</div>}
 <input
 name="password"
 type="password"
 value={values.password}
 onChange={handleChange}
 />
 {errors.password && <div>{errors.password}</div>}
 <button disabled={isSubmitting}>
 {isSubmitting ? 'جاري الإرسال...' : 'تسجيل الدخول'}
 </button>
 </form>
 );
}

// Custom Hook لإدارة اتصال WebSocket
import { useState, useEffect, useRef } from 'react';

function useWebSocket(url) {
 const [isConnected, setIsConnected] = useState(false);
 const [messages, setMessages] = useState([]);
 const socketRef = useRef(null);

 useEffect(() => {
 const socket = new WebSocket(url);
 socketRef.current = socket;

 socket. () => {
 setIsConnected(true);
 };

 socket.onmessage = (event) => {
 setMessages((prev) => [...prev, event.data]);
 };

 socket.onclose = () => {
 setIsConnected(false);
 };

 // إعادة الاتصال التلقائي
 const reconnectInterval = setInterval(() => {
 if (!isConnected && socket.readyState === WebSocket.CLOSED) {
 const newSocket = new WebSocket(url);
 socketRef.current = newSocket;
 }
 }, 5000);

 return () => {
 clearInterval(reconnectInterval);
 socket.close();
 };
 }, [url]);

 const sendMessage = (message) => {
 if (isConnected && socketRef.current) {
 socketRef.current.send(message);
 }
 };

 return { isConnected, messages, sendMessage };
}

// استخدام في المكون
function Dashboard() {
 const { isConnected, messages } = useWebSocket('wss://api.example.com/realtime');
 return (
 <div>
 <div>الحالة: {isConnected ? 'متصل' : 'غير متصل'}</div>
 <ul>
 {messages.map((msg, index) => (
 <li key={index}>{msg}</li>
 ))}
 </ul>
 </div>
 );
}

// مثال على مشكلة Stale Closures وكيفية حلها
import { useState, useEffect, useRef } from 'react';

function useApiRequest(url) {
 const [data, setData] = useState(null);
 const [isLoading, setIsLoading] = useState(false);
 const urlRef = useRef(url); // استخدام useRef لتجنب Stale Closure

 useEffect(() => {
 urlRef.current = url; // تحديث القيمة في كل تغيير
 }, [url]);

 const fetchData = async () => {
 setIsLoading(true);
 try {
 const resp await fetch(urlRef.current); // استخدام القيمة الحالية
 const result = await response.json();
 setData(result);
 } catch (error) {
 console.error('Error:', error);
 } finally {
 setIsLoading(false);
 }
 };

 return { data, isLoading, fetchData };
}

// استخدام في المكون
function DataFetcher({ url }) {
 const { data, isLoading, fetchData } = useApiRequest(url);
 return (
 <div>
 <button onClick={fetchData} disabled={isLoading}>
 جلب البيانات
 </button>
 {isLoading && <div>جاري التحميل...</div>}
 {data && <div>{JSON.stringify(data)}</div>}
 </div>
 );
}

// Custom Hook محسن لتجنب إعادة التحميل غير الضرورية
import { useState, useEffect, useMemo, useCallback } from 'react';

function useOptimizedApiRequest(url) {
 const [data, setData] = useState(null);
 const [isLoading, setIsLoading] = useState(false);

 const fetchData = useCallback(async () => {
 setIsLoading(true);
 try {
 const resp await fetch(url);
 const result = await response.json();
 setData(result);
 } catch (error) {
 console.error('Error:', error);
 } finally {
 setIsLoading(false);
 }
 }, [url]); // الاعتماد على url فقط

 // استخدام useMemo لتجنب إعادة إنشاء الكائن في كل مرة
 const result = useMemo(() => ({
 data,
 isLoading,
 fetchData,
 }), [data, isLoading, fetchData]);

 return result;
}

// استخدام في المكون
function OptimizedDataFetcher({ url }) {
 const { data, isLoading, fetchData } = useOptimizedApiRequest(url);
 return (
 <div>
 <button onClick={fetchData} disabled={isLoading}>
 جلب البيانات
 </button>
 {isLoading && <div>جاري التحميل...</div>}
 {data && <div>{JSON.stringify(data)}</div>}
 </div>
 );
}