درود دوستان من امیررضا ریاحی هستم، نویسنده جدید دیتی ✋🏼 خوش اومدید به یکی دیگه از سری پست های ری‌اکتی. امروز میخوایم use API در ری اکت رو بررسی کنیم و چیزهایی که نیازه تا راجبش بدونیم رو یاد بگیریم. این پست از مجموعه پست‌های ری‌اکت ۱۰۱ هست که شامل مجموعه‌ای از پست‌های کوتاه و کاربردی ری‌اکتی میشه.

 

use API چیه؟ 🤔

تو نسخه‌ی React19 یه قابلیت جدید اضافه شده به اسم use.

کارش چیه؟ خیلی ساده -- باهاش می‌تونی مستقیم در زمان رندر، منابعی مثل Promise یا داده‌های async رو بخونی. قبلاً برای این کار مجبور بودیم از useEffect و useState استفاده کنیم:

اول درخواست می‌فرستادیم، بعد از اینکه جواب می‌اومد، state رو آپدیت می‌کردیم و در نهایت کامپوننت re-render می‌شد.

اما حالا با use، خودِ React این کارها رو انجام می‌ده 👌🏼

 

نحوه استفاده و کاربرد use؟ 🧐

import { use } from 'react';

function Comments({commentsPromise}) {
  // `use` will suspend until the promise resolves.
  const comments = use(commentsPromise);

  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

function Page({commentsPromise}) {
  // When `use` suspends in Comments,
  // this Suspense boundary will be shown.
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  )
}

همون‌طور که توی کد بالا میبینید، use وظیفه داره پرامیس مربوط به کامنت‌ها رو بخونه و تا وقتی که اون Promise هنوز Resolve نشده، کامپوننت رو در حالت Suspend نگه داره.

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

به‌محض اینکه Promise مربوط به کامنت‌ها Resolve بشه، React خودش می‌فهمه که حالا باید کامپوننت اصلی یعنی Comments رو اجرا و رندر کنه ✅

⚠️ use نمی‌تونه پرامیس‌هایی رو بخونه که داخل خود رندر ساخته می‌شن.

❌ مثال اشتباه :

import { use } from "react";

function User() {
  const user = use(fetch("https://api.example.com/user").then(res => res.json()));

  return <div>Hello {user.name}</div>;
}