React 19 قلاب توضیح داده شده: هر آنچه شما باید بدانید

React 19 با برخی از قلاب های جدید بسیار جذاب همراه است که انجام وظایف مشترک در روش توسعه React را آسان تر می کند. این قلاب ها بر روی مواردی مانند مدیریت دولت ، دستیابی به فرم و کار با به روزرسانی های ASYNC تمرکز می کنند.
در اینجا نگاهی گذرا به قلاب های جدید در این بروزرسانی می کنیم:

در این راهنما ، ما به این موضوع شیرجه می زنیم که چگونه قبل از اینکه این قلاب ها به این فرایندها رسیدگی کنیم ، و خواهیم دید که چگونه این قلاب های جدید همه چیز را نرم تر و کارآمدتر می کنند. بیایید وارد آن شویم!

UseFormState ()

قبل از React 19 ، برای مدیریت داده های فرم ، معمولاً برای هر قسمت از فرم استفاده می کنید یا یک شیء حالت را برای همه زمینه ها ایجاد می کنید. این به معنای نوشتن یک onchange سفارشی برای هر زمینه برای به روزرسانی دستی دولت است که می تواند پیچیده شود ، به خصوص با فرم های بزرگتر.

اکنون ، با جدید useFormState() Hook in React 19 ، مدیریت داده های فرم بسیار آسان تر است. این همه ورودی های فرم را در یک مکان ردیابی می کند و در صورت تغییر هر زمینه ، حالت را به طور خودکار به روز می کند.

این بدان معناست که شما دیگر برای هر قسمت ورودی نیازی به دستگیرندگان حالت جداگانه ندارید. همه چیز در همگام سازی باقی می ماند و بسیار تمیزتر است ، به خصوص برای اشکال پیچیده تر.

به عنوان مثال: روش قدیمی برای رسیدگی به فرم های زمینه

import { useState } from 'react';

function ProfileForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    await fetch('/api/profile', { method: 'POST',
    body: JSON.stringify({name, email}) }); 
  };

return (
  <form onSubmit={handleSubmit}>
    <input 
      name="name"
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="Name"
     />
    <input 
      name="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      placeholder="Email"
     />
    <button type="submit">Submit</button>
 </form>
)

}

به عنوان مثال: با useFormState() قلاب

import { useFormState } from 'react';

function ProfileForm() { 
  const [formData, setFormData] = useFormState({
   name: '',
   email: ''
  });

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

 const handleSubmit = () => {
   // Handle form submission with the entire formData object
 }

 return (
   <form onSubmit={handleSubmit}>
      <input name="name" value={formData.name} onChange={handleChange} />
       <input name="email" value={formData.email} onChange={handleChange} />
       <button type="submit">Submit</button>
    </form>
 );
}

UseFormStatus ()

قبل از React 19 ، توسعه دهندگان برای ردیابی و مدیریت وضعیت یک فرم ، مجبور بودند از متغیرهای مختلف حالت (مانند بارگیری ، خطا ، موفقیت ، ارسال و غیره) استفاده کنند. این باعث می شود کد پیچیده تر شود ، به خصوص هنگام تلاش برای غیرفعال کردن دکمه ارسال یا نشان دادن یک نشانگر بارگذاری.

در React 19 ، useFormStatus() هوک این روند را ساده می کند. این به شما کمک می کند تا به راحتی وضعیت فرم را ردیابی کنید (خواه ارسال ، ارسال ، بیکار یا خطایی). این امر باعث می شود مدیریت چیزهایی مانند نشان دادن اسپینر بارگیری یا غیرفعال کردن دکمه ارسال بسیار ساده تر شود.

به عنوان مثال: روش قدیمی تر ارسال فرم فرم

import { useState } from 'react';

function ProfileForm() {
  const [name, setName] = useState('');
  const [pending, setPending] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setPending(true);
    await fetch('/api/profile', { method: 'POST',
    body: JSON.stringify({name, email}) }); 
    setPending(false);
    setName("");
  };

return (
  <form onSubmit={handleSubmit}>
    <input 
      type="text"
      name="name"
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="Enter Name"
     />
    <button type="submit">Submit</button>
    {pending && <p> Submitting {name} ... </p>}
 </form>
)

}

مثال: با استفاده از useFormStatus قلاب

import { useFormStatus } from ' react ' ;

function LoginForm() {
   const { pending, data, method, action } = useFormStatus();

   const handleSubmit = async ( event ) => {
      event.preventDefault();
      // Simulate form submission with fetch  or other method
};

   return (
      <form method="POST" action="/login" onSubmit={ handleSubmit }>
         <h3>Login</h3>
         <label>
            Username:
            <input name="username" type="text" required/>
         </label>
         <label>
            Password:
            <input name="password" type="password" required/>
         </label>
         <button type="submit" disabled={pending}>
            { pending ? 'Logging in....'  : 'Login' }
         </button>

         { /* Display success message if data is available */ }
         {data && <p>Welcome back, {data.username}!</p>}

         { /* Display form metadata for debugging purposes */ }
         <p>Form Method: {method}</p>
         <p>Form Action: {action}</p>
      </form>
   );
}

در useFormStatus هوک به شما کمک می کند تا وضعیت فرم را به روشی کاربر پسند مدیریت کنید. این خصوصیات مفیدی مانند در انتظار ، داده ، روش و عمل را فراهم می کند و به شما امکان می دهد تجربه کاربر را با شاخص های بارگیری ، پیام های موفقیت و رسیدگی به خطا بهبود بخشید.

در اینجا کاری است که هر خاصیت انجام می دهد:

• در انتظار: بولی که درست است در حالی که فرم ارسال می شود و پس از انجام آن نادرست است.
• داده ها: هرگونه داده پاسخ را از ارسال فرم ذخیره می کند.
• روش: روش HTTP مورد استفاده را نشان می دهد (به عنوان مثال ، ارسال یا دریافت).
• عمل: URL یا نقطه پایانی که فرم ارسال شده است.

useActionState ()

در نسخه های قبلی React ، رسیدگی به حالتهای عمل ناهمزمان اغلب با استفاده از چندین مورد نیاز است useState متغیرهایی برای ردیابی وضعیت هر عملیات:

import { useState } from ' react ';

function SubmitButton() {
   const [ isSubmitting, setIsSubmitting ] = useState(false);
   const [ error, setError ] = useState(null);
   const [ success, setSuccess ] = useState(false);

   const handleSubmit = async() => {
   setIsSubmitting(true);
   setError(null);
   setSuccess(false);
   try {
      await fetch('/api/submit' , { method: 'POST' });
      setSuccess(true);
   } catch(err) {
      setError('Submission failed');
   }   
   }  finally {
      setIsSubmitting(false);
   }   
};

   return (
      <div>
         <button onClick= {handleSubmit} disabled= {isSubmitting }>
            { isSubmitting ? 'Submitting ... ' : 'Submit' }
         </button>
         { error && <p>{ error }</p> }
         { success && <p>Success!</p> }
      </div>
   );
}

در useActionState یک قلاب عمومی است که برای مدیریت چرخه عمر این اقدامات یا کارها به روشی ساده تر ، با ارائه یک روش استاندارد برای مدیریت و پاسخ دادن به هر مرحله از عملیات طراحی شده است.

این به حفظ جریان واضح و کنترل شده در به روزرسانی های UI کمک می کند ، به ویژه هنگامی که اقدامات نیاز به ردیابی وضعیت های مختلف مانند “بیکار” ، “بارگذاری” ، “موفقیت” یا “یا
“خطا.”

با استفاده از مثال ما در بالا ، useActionState هوک به ساده کردن این الگوی با محصور کردن حالتهای مختلف یک عمل در یک قلاب واحد کمک می کند و به شما امکان می دهد تا بارگذاری ، موفقیت و خطای را به طور خلاصه کنترل کنید.

مثال: با استفاده از useActionState قلاب

import { useActionState } from 'react'

function SubmitButton() {

   const [submitStatus, performSubmit] = useActionState(async () => {
    await fetch('/api/submit', { method: 'POST' });
});

   return (
    <div>
      <button onClick={performSubmit} disabled={submitStatus.isLoading}>
    {submitStatus.isLoading ? 'Submitting ...' : 'Submit'}
      </button>
    {submitStatus.error && <p>{submitStatus.error.message}</p>}
    {submitStatus.isSuccess && <p>Success!</p>}
   </div>
  );
}

با useActionState:

• SubmitStatus شیئی است که حاوی خواصی مانند بارگیری ، IssuCcess و خطا است که می توانید بر اساس وضعیت فعلی عمل ، برای ارائه UI به صورت مشروط استفاده کنید.
• TermsubMit تابعی برای استناد به عمل است که به طور خودکار SubmitStatus را به روز می کند.
• نیازی به متغیرهای حالت اضافی یا رسیدگی به خطای دستی در منطق UI ، کاهش پیچیدگی کد و خواندن آن نیست.

Useopmimistic ()

قبل از React 19 ، برای ایجاد به روزرسانی های خوش بین UI ، جایی که تغییرات فوراً قبل از تأیید سرور ظاهر می شود ، ما اغلب از ترکیبی از متغیرهای حالت و عملکردهای ناهمزمان استفاده می کردیم.

به عنوان مثال ، ما یک متغیر حالت را برای نشان دادن به روزرسانی فوری UI تنظیم می کنیم ، سپس درخواست API را ارسال کرده و بر اساس پاسخ دوباره حالت را به روز می کنیم.
این رویکرد کاربردی بود اما برای اطمینان از سازگاری بین UI و وضعیت سرور ، به کد دیگ بخار و استفاده از خطا نیاز داشت.

در React 19 ، useOptimistic هوک با ارائه راهی آسان برای رسیدگی به به روزرسانی های خوش بینانه ، این کار را ساده می کند.
این قلاب به شما امکان می دهد UI را بلافاصله به روز کنید ، حتی اگر تأیید واقعی سرور در انتظار باشد.
در صورت عدم موفقیت سرور ، useOptimistic می توان برای بازگشت به حالت پیکربندی کرد ، بنابراین تجربه ای صاف با حداقل کد ارائه می دهد.

به عنوان مثال: روش قدیمی تر برای به روزرسانی خوش بینانه

import { useState } from 'react'

function LikeButton({ postId }) {
  const [isLiked, setIsLiked] = useState(false);
  const [error, setError] = useState(null);

  const handleLike = async () => {
   // Update state immediately
    setIsLiked(!isLiked);

   try{
    // Make the API call
     await fetch(`/api/posts/${postId}/like`, { method: 'POST' });
   } catch (err) {
   // Revert state if an error occurs
    setIsLiked(isLiked);
    setError('Failed to update like status');
   }
 };

 return (
  <div>
    <button onClick={handleLike}>
      {isLiked ? 'Unlike' : 'Like'}
    </button>
      {error && <p>{error}</p>}
  </div>
 );
}

با useOptimistic هوک ، React 19 با مدیریت خودکار یک حالت خوش بینانه ، این الگوی را ساده می کند. این امکان را به شما می دهد تا UI را فوراً به روز کنید بدون اینکه به کد خطای اضافی نیاز داشته باشید و اجزای خود را تمیز تر و کارآمدتر کنید.

استفاده ()

در نسخه های قبلی React ، انجام وظایف ناهمزمان مانند واکشی داده ها در قطعات معمولاً مورد نیاز به استفاده و استفاده مجدد است. این اغلب منجر به منطق پیچیده و تو در تو می شد ، به خصوص هنگام مدیریت حالت بارگیری و خطا.

با React 19 ، Hook New Use Hook این روند را با اجازه دادن مستقیم به یک وعده در اجزای موجود ، ساده می کند. این نیاز به اضافی را از بین می برد useEffect وت useState کد ، ساخت واکشی داده ها بیشتر شبیه کد همزمان است. نتیجه؟ اجزای پاک کننده ، خواندنی تر و قابل نگهداری.

مثال: داده های ناهمزمان با استفاده از قلاب های UseEff و استفاده از قلاب های استفاده شده.

import { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const response = await fetch('/api/user');
        const data = await response.json();
        setUser(data);
       } finally {
         setLoading(false);
       }
      };
       fetchUser();
     },[]);

 if (loading) return <p>Loading ... </p>;
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div> 
  );
}

مثال: با استفاده از قلاب استفاده جدید () برای واکشی ناهمزمان

import { use } from 'react'

async function fetchUser() {
  const response = await fetch('/api/user');
  return response.json();
}

function UserProfile() {
  const user = use(fetchUser());

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

React 19 مجموعه قدرتمندی از قلاب ها را معرفی می کند که باعث می شود مدیریت دولت ، کار با فرم و عملیات ناهمزمان از همیشه آسانتر شود. با قلاب هایی مانند UseFormState ، UseFormStatus ، UseActionState ، Useopmimistic و استفاده ، React اکنون روشهای بصری و کارآمدتری برای رسیدگی به تعامل پیچیده UI با کد کمتری از دیگ بخار فراهم می کند.

با استفاده از این قلاب های جدید ، می توانید ضمن بهبود تجربه کاربر در برنامه های خود ، کد تمیز و قابل خواندن را بنویسید. به کاوش در این ویژگی ها ادامه دهید تا در توسعه React مدرن بمانید!

برنامه نویسی مبارک! 🚀

💡 بیایید به هم وصل شویم!
📩 برای من ایمیل کنید: getIntouchWithVishnu@gmail.com
☕ از کار من پشتیبانی کنید: یک قهوه برای من بخرید