درود فراوان 🖐️ من امیررضا هستم. نویسندهٔ جدید دیتی. نسخه Stable ری‌اکت ۱۹ با کلی ویژگی جدید بلاخره منتشر شده که تو این پستِ دیتی قراره با هم ویژگی‌های این نسخهٔ ری‌اکت رو بررسی کنیم.

 

 

۱. Actions (اکشن ها)

یکی از رایج‌ترین و پرکاربردترین موارد در ری‌اکت اکشن‌ها هستند که به ما این قابلیت و امکان رو میدن تا بتونیم درخواست‌هایی که می‌فرستیم رو مدیریت کنیم و عملیاتی رو بر اساس وضعیت درخواست انجام بدیم.

فرض کنین قراره اسم کاربر رو طی یک درخواست تغییر بدیم:

function UpdateName() {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);

    if (error) {
      setError(error);
      return;
    } 
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

همونطور که می‌بینید برای فرستادن درخواست باید چندین استیت رو به صورت همزمان بسته به وضعیت درخواست آپدیت و مدیریت کنین. اما توی ری‌اکت ۱۹ می‌تونین با استفاده از useTransition راحت‌تر استیت‌ها رو مدیریت کنین.

اما useTransition چجوری کار می‌کنه؟ 🤔

function UpdateName() {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}