درود دوستان من امیررضا ریاحی هستم، نویسنده جدید دیتی ✋🏼 خوش اومدید به یکی دیگه از سری پست های ری‌اکتی. امروز میخوایم 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>;
}

اینجا چون Promise در حین رندر ساخته شده، React نمی‌تونه اون رو مدیریت کنه و با خطایی شبیه به این روبه‌رو می‌شی 👇

A component was suspended by an uncached promise.
Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.

همچنین از use می‌تونیم برای خوندن Context ها استفاده کنیم :

import { use } from 'react';
import ThemeContext from './ThemeContext'

function Heading({children}) {
  if (children == null) {
    return null;
  }
  
  // This would not work with useContext
  // because of the early return.
  const theme = use(ThemeContext);
  return (
    <h1 style={{color: theme.color}}>
      {children}
    </h1>
  );
}

use این قابلیت رو داره که مستقیماً با مقدار Context کار کنه، حتی اگر قبل از اون کد به یه return رسیده باشه.

یعنی React اجازه می‌ده مقدار Context رو در هر نقطه‌ای از تابع کامپوننت بخونی، بدون اینکه دچار خطا بشی. اما اگه همون موقع از useContext استفاده می‌کردیم، ماجرا فرق می‌کرد.

چون طبق قوانین هوک‌ها، نباید قبل از اجرای useContext هیچ نوع return یا شرطی داشته باشی. اگه این کار رو می‌کردی، React بهت خطای معروف زیر رو می‌داد:

Error: Hooks can only be called at the top level of a function component.

...

خب دوستان امروز باهم use رو بررسی کردیم و با نحوه استفاده و کاربرد اون در React آشنا شدیم. امیدوارم خوب متوجهش شده باشید و از این به بعد ازش کلی در پروژه هاتون استفاده کنید :)

اگر سوالی داشتید حتما در بخش کامنت ها برسید بهتون پاسخ میدم ✌🏻

منبع :

هرچیزی که باید از use API ری اکت بدونیم

use API چیه؟ 🤔

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