M
MLOG
هوک use: در ری‌اکت: یک راهنمای جامع | MLOG | MLOG}> {/* Assuming this ID doesn't exist and will cause an error */} ); } export default App;

در این مثال، اگر تابع fetchUser خطایی پرتاب کند (مثلاً به دلیل وضعیت 404)، کامپوننت ErrorBoundary خطا را دریافت کرده و UI جایگزین را نمایش می‌دهد. این جایگزین می‌تواند هر کامپوننت ری‌اکت باشد، مانند یک پیام خطا یا دکمه تلاش مجدد.

تکنیک‌های پیشرفته با use:

۱. کش کردن منابع (Caching)

برای جلوگیری از دریافت‌های تکراری، می‌توانید منبع (Promise) را کش کرده و آن را در چندین کامپوننت یا رندر مجدداً استفاده کنید. این بهینه‌سازی برای عملکرد بسیار حیاتی است.

            
import React, { Suspense, useRef } from 'react';

const resourceCache = new Map();

async function fetchUser(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user: ${response.status}`);
  }
  return response.json();
}

function getUserResource(userId) {
  if (!resourceCache.has(userId)) {
    resourceCache.set(userId, {
      read() {
        if (!this.promise) {
          this.promise = fetchUser(userId);
        }
        if (this.result) {
          return this.result;
        }
        throw this.promise;
      }
    });
  }
  return resourceCache.get(userId);
}

function UserProfile({ userId }) {
  const resource = getUserResource(userId);
  const user = resource.read();

  return (
    

      
{user.name}

      
Email: {user.email}

      
Phone: {user.phone}

    

  );
}

function App() {
  return (
    Loading user data...
}> ); } export default App;

در این مثال:

۲. استفاده از use: با کامپوننت‌های سرور

هوک use: به ویژه در کامپوننت‌های سرور ری‌اکت (React Server Components) مفید است، جایی که دریافت داده‌ها می‌تواند مستقیماً روی سرور انجام شود. این امر منجر به بارگذاری اولیه سریع‌تر صفحات و بهبود SEO می‌شود.

مثال با کامپوننت سرور Next.js

            
// app/user/[id]/page.jsx (Server Component in Next.js)
import React from 'react';

async function fetchUser(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user: ${response.status}`);
  }
  return response.json();
}

export default async function UserPage({ params }) {
  const user = React.use(fetchUser(params.id));

  return (
    

      
{user.name}

      
Email: {user.email}

      
Phone: {user.phone}

    

  );
}

در این کامپوننت سرور Next.js، تابع fetchUser داده‌های کاربر را روی سرور دریافت می‌کند. هوک use: کامپوننت را تا زمان در دسترس قرار گرفتن داده‌ها به حالت تعلیق درمی‌آورد و امکان رندرینگ کارآمد سمت سرور را فراهم می‌کند.

بهترین شیوه‌ها برای use:

مثال‌های دنیای واقعی

۱. لیست محصولات در یک فروشگاه آنلاین

یک وب‌سایت تجارت الکترونیک را تصور کنید که لیست محصولات را نمایش می‌دهد. هر کارت محصول می‌تواند از use: برای دریافت جزئیات محصول استفاده کند:

            
// ProductCard.jsx
import React, { Suspense } from 'react';

async function fetchProduct(productId) {
  const response = await fetch(`/api/products/${productId}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch product: ${response.status}`);
  }
  return response.json();
}

function ProductCard({ productId }) {
  const product = React.use(fetchProduct(productId));

  return (
    

      
{product.name}

      
{product.description}

      
Price: ${product.price}

    

  );
}

function ProductList({ productIds }) {
  return (
    

      {productIds.map((productId) => (
        Loading product...
}>
          
        
      ))}
); } export default ProductList;

این رویکرد تضمین می‌کند که هر کارت محصول به طور مستقل بارگذاری می‌شود و رندر کلی صفحه توسط محصولاتی که بارگذاری آن‌ها کند است، مسدود نمی‌شود. کاربر نشانگرهای بارگذاری مجزا برای هر محصول را مشاهده می‌کند که تجربه بهتری را فراهم می‌کند.

۲. فید شبکه‌های اجتماعی

یک فید شبکه‌های اجتماعی می‌تواند از use: برای دریافت پروفایل‌های کاربران، پست‌ها و نظرات استفاده کند:

            
// Post.jsx
import React, { Suspense } from 'react';

async function fetchPost(postId) {
  const response = await fetch(`/api/posts/${postId}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch post: ${response.status}`);
  }
  return response.json();
}

async function fetchComments(postId) {
  const response = await fetch(`/api/posts/${postId}/comments`);
  if (!response.ok) {
    throw new Error(`Failed to fetch comments: ${response.status}`);
  }
  return response.json();
}

function Comments({ postId }) {
  const comments = React.use(fetchComments(postId));

  return (
    
    
      {comments.map((comment) => (
        
  • {comment.text}
    • 
      ))}
    

  );
}

function Post({ postId }) {
  const post = React.use(fetchPost(postId));

  return (
    

      
{post.title}

      
{post.content}

      Loading comments...
}>
); } export default Post;

این مثال از مرزهای Suspense تودرتو برای بارگذاری محتوای پست و نظرات به طور مستقل استفاده می‌کند. کاربر می‌تواند محتوای پست را ببیند در حالی که نظرات هنوز در حال بارگذاری هستند.

اشتباهات رایج و نحوه جلوگیری از آن‌ها

جایگزین‌های use:

در حالی که use: مزایای قابل توجهی ارائه می‌دهد، رویکردهای جایگزینی برای دریافت داده در ری‌اکت وجود دارد:

انتخاب بین این جایگزین‌ها به پیچیدگی برنامه و نیازهای خاص شما بستگی دارد. برای سناریوهای ساده دریافت داده، use: می‌تواند گزینه عالی باشد. برای سناریوهای پیچیده‌تر، کتابخانه‌هایی مانند useSWR یا React Query ممکن است مناسب‌تر باشند.

نتیجه‌گیری

هوک use: در ری‌اکت یک روش قدرتمند و اعلانی برای مدیریت بارگذاری منابع و دریافت داده‌ها ارائه می‌دهد. با بهره‌گیری از use: به همراه Suspense، می‌توانید منطق کامپوننت خود را ساده‌تر کنید، تجربه کاربری را بهبود بخشید و عملکرد را بهینه کنید. این راهنما مبانی، تکنیک‌های پیشرفته و بهترین شیوه‌های استفاده از use: در برنامه‌های ری‌اکت شما را پوشش داد. با پیروی از این دستورالعمل‌ها، می‌توانید عملیات ناهمزمان را به طور مؤثر مدیریت کرده و برنامه‌هایی قوی، کارآمد و کاربرپسند بسازید. با ادامه تکامل ری‌اکت، تسلط بر تکنیک‌هایی مانند use: برای پیشرو بودن و ارائه تجربیات کاربری استثنایی ضروری می‌شود.

منابع