x32x01
أدارة أكتب كود
- بواسطة x32x01 ||
أخيرًا نقدر نستخدم React 19 بشكل مستقر!
النسخة الجديدة جاية بميزات جامدة جدًا هتسهل علينا حاجات روتينية كنا بنعملها ، أهمها:
Actions and Form Handling
الميزة دي بتخلّي التعامل مع الـ Forms أسهل بكتير، وخصوصًا في تعديل البيانات. باستخدام useActionState، هتقدر تدير الستيت بتاعت الفورم بسلاسة.
مثال سريع: ( أوضح ف الصورة )
الـ Form Status
دلوقتي ممكن تعرض حالة التحميل بسهولة باستخدام useFormStatus:
جرب الميزات دي بنفسك وشوف الفرق في مشاريعك!
لو استفدت، اديني ريأكت، وشير عشن تفيد غيرك
وقولى إيه أكتر ميزة عجبتك في الاصدار الجديد؟
النسخة الجديدة جاية بميزات جامدة جدًا هتسهل علينا حاجات روتينية كنا بنعملها ، أهمها:
Actions and Form Handling
الميزة دي بتخلّي التعامل مع الـ Forms أسهل بكتير، وخصوصًا في تعديل البيانات. باستخدام useActionState، هتقدر تدير الستيت بتاعت الفورم بسلاسة.
مثال سريع: ( أوضح ف الصورة )
JavaScript:
function UpdateProfile() {
const [error, submitAction, isPending] = useActionState(
async (previousState, formData) => {
const name = formData.get("name");
try {
await updateProfile(name);
return null; // مفيش أخطاء
} catch (err) {
return "فشل في تحديث الملف الشخصي";
}
},
null
);
return (
<form action={submitAction}>
<input type="text" name="name" />
<button type="submit" disabled={isPending}>
{isPending ? "جاري التحديث…" : "تحديث الملف"}
</button>
{error && <p className="error">{error}</p>}
</form>
);
}
الـ Form Status
دلوقتي ممكن تعرض حالة التحميل بسهولة باستخدام useFormStatus:
JavaScript:
import { useFormStatus } from 'react-dom';
function SubmitButton() {
const { pending } = useFormStatus();
return (
<button disabled={pending}>
{pending ? 'جاري الإرسال…' : 'إرسال'}
</button>
);
}
لو استفدت، اديني ريأكت، وشير عشن تفيد غيرك
وقولى إيه أكتر ميزة عجبتك في الاصدار الجديد؟