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

// شبیه‌سازی یک فراخوانی API (با اندپوینت واقعی خود جایگزین کنید)
const fetchUserData = async (userId) => {
  console.log(`Fetching user data for user ID: ${userId}`);
  await new Promise(resolve => setTimeout(resolve, 1000)); // شبیه‌سازی تأخیر شبکه
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user data: ${response.status}`);
  }
  return response.json();
};

// ایجاد یک نسخه کش‌شده از تابع fetchUserData
const getCachedUserData = experimental_useCache(fetchUserData);

function UserProfile({ userId }) {
  const userData = getCachedUserData(userId);

  return (
    

      
User Profile
      
Name: {userData.name}
      
Email: {userData.email}
    
  );
}

function App() {
  return (
    Loading user data...

توضیحات:

1. وارد کردن experimental_useCache: ما هوک مورد نیاز را از ری‌اکت وارد می‌کنیم.
2. تعریف fetchUserData: این تابع دریافت داده‌های کاربر از یک API را شبیه‌سازی می‌کند. فراخوانی API ساختگی را با منطق دریافت داده واقعی خود جایگزین کنید. await new Promise تأخیر شبکه را شبیه‌سازی می‌کند تا تأثیر کشینگ بیشتر مشخص شود. مدیریت خطا برای آمادگی در محیط پروداکشن گنجانده شده است.
3. ایجاد getCachedUserData: ما از experimental_useCache برای ایجاد یک نسخه کش‌شده از تابع fetchUserData استفاده می‌کنیم. این تابعی است که ما در کامپوننت خود استفاده خواهیم کرد.
4. استفاده از getCachedUserData در UserProfile: کامپوننت UserProfile تابع getCachedUserData را برای بازیابی داده‌های کاربر فراخوانی می‌کند. از آنجایی که ما از experimental_useCache استفاده می‌کنیم، اگر داده‌ها قبلاً موجود باشند، از کش دریافت خواهند شد.
5. پوشاندن با Suspense: کامپوننت UserProfile با Suspense پوشانده شده است تا وضعیت بارگذاری را در حین دریافت داده‌ها مدیریت کند. این امر تجربه کاربری روانی را تضمین می‌کند، حتی اگر بارگذاری داده‌ها مدتی طول بکشد.
6. فراخوانی‌های چندگانه: کامپوننت App دو کامپوننت UserProfile را با همان userId (1) رندر می‌کند. کامپوننت دوم UserProfile از داده‌های کش‌شده استفاده می‌کند و از فراخوانی دوم API جلوگیری می‌کند. همچنین یک پروفایل کاربری دیگر با شناسه متفاوت برای نمایش دریافت داده‌های کش‌نشده وجود دارد.

در این مثال، اولین کامپوننت UserProfile داده‌های کاربر را از API دریافت می‌کند. با این حال، کامپوننت دوم UserProfile از داده‌های کش‌شده استفاده می‌کند و از فراخوانی دوم API جلوگیری می‌کند. این می‌تواند به طور قابل توجهی عملکرد را بهبود بخشد، به خصوص اگر فراخوانی API پرهزینه باشد یا داده‌ها توسط بسیاری از کامپوننت‌ها مورد دسترسی قرار گیرند.

ادغام با Suspense

experimental_useCache برای کار یکپارچه با ویژگی Suspense ری‌اکت طراحی شده است. Suspense به شما امکان می‌دهد تا به صورت اعلانی وضعیت بارگذاری کامپوننت‌هایی را که منتظر بارگذاری داده‌ها هستند، مدیریت کنید. هنگامی که از experimental_useCache به همراه Suspense استفاده می‌کنید، ری‌اکت به طور خودکار رندر کامپوننت را تا زمانی که داده‌ها در کش موجود شوند یا از منبع داده دریافت شوند، به حالت تعلیق در می‌آورد. این به شما امکان می‌دهد با نمایش یک رابط کاربری جایگزین (fallback UI) (مانند یک اسپینر بارگذاری) در حین بارگذاری داده‌ها، تجربه کاربری بهتری ارائه دهید.

در مثال بالا، کامپوننت Suspense کامپوننت UserProfile را می‌پوشاند و یک پراپ fallback ارائه می‌دهد. این رابط کاربری جایگزین در حین دریافت داده‌های کاربر نمایش داده می‌شود. هنگامی که داده‌ها در دسترس باشند، کامپوننت UserProfile با داده‌های دریافت شده رندر می‌شود.

کامپوننت‌های سرور ری‌اکت (RSCs) و experimental_useCache

experimental_useCache هنگام استفاده با کامپوننت‌های سرور ری‌اکت درخشش خود را نشان می‌دهد. در RSCs، دریافت داده در سرور اتفاق می‌افتد و نتایج به کلاینت استریم می‌شوند. experimental_useCache می‌تواند با اطمینان از اینکه داده‌ها فقط یک بار در هر درخواست دریافت می‌شوند، حتی اگر چندین کامپوننت به همان داده‌ها نیاز داشته باشند، به طور قابل توجهی دریافت داده در سمت سرور را بهینه کند.

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

مثال (مثال مفهومی RSC):

// کامپوننت سرور
import { experimental_useCache } from 'react';

async function fetchUserData(userId) {
  // شبیه‌سازی دریافت داده‌های کاربر از پایگاه داده
  await new Promise(resolve => setTimeout(resolve, 500)); // شبیه‌سازی تأخیر کوئری پایگاه داده
  return { id: userId, name: `User ${userId}`, email: `user${userId}@example.com` };
}

const getCachedUserData = experimental_useCache(fetchUserData);

export default async function UserDashboard({ userId }) {
  const userData = await getCachedUserData(userId);

  return (
    

      
Welcome, {userData.name}!
      
      
    
  );
}

async function UserInfo({ userId }) {
  const userData = await getCachedUserData(userId);
  return (
    

      
User Information
      
Email: {userData.email}
    
  );
}

async function UserActivity({ userId }) {
  const userData = await getCachedUserData(userId);
  return (
    

      
Recent Activity
      
{userData.name} viewed the homepage.
    
  );
}

در این مثال ساده‌شده، UserDashboard، UserInfo و UserActivity همگی کامپوننت‌های سرور هستند. همه آنها به داده‌های کاربر نیاز دارند. استفاده از experimental_useCache تضمین می‌کند که تابع fetchUserData فقط یک بار در هر درخواست سرور فراخوانی می‌شود، حتی اگر در چندین کامپوننت استفاده شود.

ملاحظات و معایب بالقوه

در حالی که experimental_useCache مزایای قابل توجهی ارائه می‌دهد، مهم است که از محدودیت‌ها و معایب بالقوه آن آگاه باشید:

• وضعیت آزمایشی: به عنوان یک API آزمایشی، experimental_useCache ممکن است در نسخه‌های آینده ری‌اکت تغییر کند یا حذف شود. آن را با احتیاط در محیط‌های پروداکشن استفاده کنید و آماده باشید تا در صورت لزوم کد خود را تطبیق دهید. مستندات رسمی و یادداشت‌های انتشار ری‌اکت را برای به‌روزرسانی‌ها دنبال کنید.
• بی‌اعتبار کردن کش (Cache Invalidation): experimental_useCache مکانیزم‌های داخلی برای بی‌اعتبار کردن کش ارائه نمی‌دهد. شما باید استراتژی‌های خود را برای بی‌اعتبار کردن کش هنگامی که داده‌های زیربنایی تغییر می‌کنند، پیاده‌سازی کنید. این می‌تواند شامل استفاده از هوک‌های سفارشی یا context providerها برای مدیریت طول عمر کش باشد.
• مصرف حافظه: کش کردن داده‌ها می‌تواند مصرف حافظه را افزایش دهد. به اندازه داده‌هایی که کش می‌کنید توجه داشته باشید و استفاده از تکنیک‌هایی مانند حذف یا انقضای کش را برای محدود کردن مصرف حافظه در نظر بگیرید. مصرف حافظه را در برنامه خود، به ویژه در محیط‌های سمت سرور، نظارت کنید.
• سریال‌سازی آرگومان‌ها: آرگومان‌های ارسال شده به تابع کش‌شده باید قابل سریال‌سازی باشند. این به این دلیل است که experimental_useCache از آرگومان‌ها برای تولید یک کلید کش استفاده می‌کند. اگر آرگومان‌ها قابل سریال‌سازی نباشند، ممکن است کش به درستی کار نکند.
• اشکال‌زدایی (Debugging): اشکال‌زدایی مشکلات مربوط به کشینگ می‌تواند چالش‌برانگیز باشد. از ابزارهای لاگ‌گیری و اشکال‌زدایی برای بازرسی کش و تأیید اینکه مطابق انتظار رفتار می‌کند، استفاده کنید. افزودن لاگ‌گیری اشکال‌زدایی سفارشی به تابع fetchUserData خود را برای ردیابی زمان دریافت داده‌ها و زمان بازیابی آنها از کش در نظر بگیرید.
• وضعیت سراسری (Global State): از استفاده از وضعیت قابل تغییر سراسری در داخل تابع کش‌شده خودداری کنید. این می‌تواند منجر به رفتار غیرمنتظره شود و استدلال در مورد کش را دشوار کند. برای حفظ یک وضعیت سازگار، به آرگومان‌های تابع و نتیجه کش‌شده تکیه کنید.
• ساختارهای داده پیچیده: هنگام کش کردن ساختارهای داده پیچیده، به خصوص اگر حاوی ارجاعات دایره‌ای باشند، محتاط باشید. ارجاعات دایره‌ای می‌توانند منجر به حلقه‌های بی‌نهایت یا خطاهای سرریز پشته (stack overflow) در حین سریال‌سازی شوند.

استراتژی‌های بی‌اعتبار کردن کش

از آنجایی که experimental_useCache بی‌اعتبارسازی را مدیریت نمی‌کند، در اینجا چند استراتژی وجود دارد که می‌توانید به کار بگیرید:

• بی‌اعتبارسازی دستی: یک هوک سفارشی یا context provider برای ردیابی تغییرات داده‌ها پیاده‌سازی کنید. هنگامی که تغییری رخ می‌دهد، با بازنشانی تابع کش‌شده، کش را بی‌اعتبار کنید. این شامل ذخیره یک نسخه یا مُهر زمانی است که با تغییر داده‌ها، تغییر می‌کند و بررسی آن در داخل تابع `fetch` است.

       
       import React, { createContext, useContext, useState, experimental_useCache } from 'react';
  
       const DataVersionContext = createContext(null);
  
       export function DataVersionProvider({ children }) {
         const [version, setVersion] = useState(0);
         const invalidate = () => setVersion(v => v + 1);
  
         return (
           
             {children}
           
         );
       }
  
       async function fetchData(version) {
          console.log("در حال دریافت داده با نسخه:", version)
          await new Promise(resolve => setTimeout(resolve, 500));
          return { data: `Data for version ${version}` };
       }
  
       const useCachedData = () => {
         const { version } = useContext(DataVersionContext);
         return experimental_useCache(() => fetchData(version))(); // فراخوانی کش
       };
  
       export function useInvalidateData() {
         return useContext(DataVersionContext).invalidate;
       }
  
       export default useCachedData;
  
       // مثال استفاده:
       function ComponentUsingData() {
         const data = useCachedData();
         return 
  {data?.data}
  ;
       }
  
       function ComponentThatInvalidates() {
          const invalidate = useInvalidateData();
          return Invalidate Cache
       }
  
       // برنامه خود را با DataVersionProvider بپوشانید
       // 
       //   
       //   
       // 
       
       

• انقضای مبتنی بر زمان: یک مکانیزم انقضای کش پیاده‌سازی کنید که پس از یک دوره زمانی مشخص، به طور خودکار کش را بی‌اعتبار کند. این می‌تواند برای داده‌هایی که نسبتاً ثابت هستند اما ممکن است گاهی اوقات تغییر کنند، مفید باشد.
• بی‌اعتبارسازی مبتنی بر تگ: تگ‌ها را به داده‌های کش‌شده مرتبط کنید و کش را بر اساس این تگ‌ها بی‌اعتبار کنید. این می‌تواند برای بی‌اعتبار کردن داده‌های مرتبط هنگامی که یک قطعه داده خاص تغییر می‌کند، مفید باشد.
• وب‌سوکت‌ها و به‌روزرسانی‌های بی‌درنگ: اگر برنامه شما از وب‌سوکت‌ها یا سایر مکانیزم‌های به‌روزرسانی بی‌درنگ استفاده می‌کند، می‌توانید از این به‌روزرسانی‌ها برای راه‌اندازی بی‌اعتبارسازی کش استفاده کنید. هنگامی که یک به‌روزرسانی بی‌درنگ دریافت می‌شود، کش را برای داده‌های تحت تأثیر بی‌اعتبار کنید.

بهترین شیوه‌ها برای استفاده از experimental_useCache

برای استفاده مؤثر از experimental_useCache و جلوگیری از مشکلات احتمالی، این بهترین شیوه‌ها را دنبال کنید:

• از آن برای عملیات پرهزینه استفاده کنید: فقط از experimental_useCache برای عملیاتی استفاده کنید که واقعاً پرهزینه هستند، مانند دریافت داده یا محاسبات پیچیده. کش کردن عملیات کم‌هزینه به دلیل سربار مدیریت کش، در واقع می‌تواند عملکرد را کاهش دهد.
• کلیدهای کش واضح تعریف کنید: اطمینان حاصل کنید که آرگومان‌های ارسال شده به تابع کش‌شده به طور منحصر به فرد داده‌های در حال کش شدن را مشخص می‌کنند. این برای اطمینان از اینکه کش به درستی کار می‌کند و داده‌ها به طور ناخواسته مجدداً استفاده نمی‌شوند، حیاتی است. برای آرگومان‌های شیء، سریال‌سازی و هش کردن آنها را برای ایجاد یک کلید ثابت در نظر بگیرید.
• استراتژی‌های بی‌اعتبار کردن کش را پیاده‌سازی کنید: همانطور که قبلاً ذکر شد، شما باید استراتژی‌های خود را برای بی‌اعتبار کردن کش هنگامی که داده‌های زیربنایی تغییر می‌کنند، پیاده‌سازی کنید. استراتژی‌ای را انتخاب کنید که برای برنامه و داده‌های شما مناسب باشد.
• عملکرد کش را نظارت کنید: عملکرد کش خود را برای اطمینان از اینکه مطابق انتظار کار می‌کند، نظارت کنید. از ابزارهای لاگ‌گیری و اشکال‌زدایی برای ردیابی cache hitها و missها و شناسایی گلوگاه‌های بالقوه استفاده کنید.
• جایگزین‌ها را در نظر بگیرید: قبل از استفاده از experimental_useCache، در نظر بگیرید که آیا راه‌حل‌های کشینگ دیگر ممکن است برای نیازهای شما مناسب‌تر باشند. به عنوان مثال، اگر به یک راه‌حل کشینگ قوی‌تر با ویژگی‌های داخلی مانند بی‌اعتبار کردن و حذف کش نیاز دارید، ممکن است استفاده از یک کتابخانه کشینگ اختصاصی را در نظر بگیرید. کتابخانه‌هایی مانند `react-query`، `SWR` یا حتی استفاده از `localStorage` گاهی اوقات می‌توانند مناسب‌تر باشند.
• کوچک شروع کنید: experimental_useCache را به تدریج در برنامه خود معرفی کنید. با کش کردن چند عملیات کلیدی دریافت داده شروع کنید و با کسب تجربه بیشتر، به تدریج استفاده از آن را گسترش دهید.
• استراتژی کشینگ خود را مستند کنید: استراتژی کشینگ خود را به وضوح مستند کنید، از جمله اینکه کدام داده‌ها کش می‌شوند، چگونه کش بی‌اعتبار می‌شود و هرگونه محدودیت بالقوه. این کار درک و نگهداری کد شما را برای سایر توسعه‌دهندگان آسان‌تر می‌کند.
• به طور کامل تست کنید: پیاده‌سازی کشینگ خود را به طور کامل تست کنید تا اطمینان حاصل کنید که به درستی کار می‌کند و هیچ باگ غیرمنتظره‌ای ایجاد نمی‌کند. تست‌های واحد بنویسید تا تأیید کنید که کش مطابق انتظار پر و بی‌اعتبار می‌شود.

جایگزین‌های experimental_useCache

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

• useMemo: هوک useMemo می‌تواند برای memoize کردن نتایج محاسبات پرهزینه استفاده شود. در حالی که کشینگ واقعی را در بین رندرها فراهم نمی‌کند، می‌تواند برای بهینه‌سازی عملکرد در داخل یک کامپوننت مفید باشد. این هوک برای دریافت داده یا سناریوهایی که داده‌ها باید بین کامپوننت‌ها به اشتراک گذاشته شوند، کمتر مناسب است.
• React.memo: React.memo یک کامپوننت مرتبه بالاتر است که می‌تواند برای memoize کردن کامپوننت‌های تابعی استفاده شود. این از رندرهای مجدد کامپوننت در صورتی که پراپ‌های آن تغییر نکرده باشند، جلوگیری می‌کند. این می‌تواند در برخی موارد عملکرد را بهبود بخشد، اما کشینگ داده‌ها را فراهم نمی‌کند.
• کتابخانه‌های کشینگ خارجی (react-query, SWR): کتابخانه‌هایی مانند react-query و SWR راه‌حل‌های جامع دریافت داده و کشینگ را برای برنامه‌های ری‌اکت ارائه می‌دهند. این کتابخانه‌ها ویژگی‌هایی مانند بی‌اعتبار کردن خودکار کش، دریافت داده در پس‌زمینه و به‌روزرسانی‌های خوش‌بینانه را ارائه می‌دهند. آنها می‌توانند انتخاب خوبی باشند اگر به یک راه‌حل کشینگ قوی‌تر با ویژگی‌های پیشرفته نیاز دارید.
• Local Storage / Session Storage: برای موارد استفاده ساده‌تر یا حفظ داده‌ها در طول سشن‌ها، می‌توان از `localStorage` یا `sessionStorage` استفاده کرد. با این حال، مدیریت دستی سریال‌سازی، بی‌اعتبارسازی و محدودیت‌های ذخیره‌سازی مورد نیاز است.
• راه‌حل‌های کشینگ سفارشی: شما همچنین می‌توانید راه‌حل‌های کشینگ سفارشی خود را با استفاده از context API ری‌اکت یا سایر تکنیک‌های مدیریت وضعیت بسازید. این به شما کنترل کاملی بر پیاده‌سازی کشینگ می‌دهد، اما همچنین به تلاش و تخصص بیشتری نیاز دارد.

نتیجه‌گیری

هوک experimental_useCache ری‌اکت راهی قدرتمند و راحت برای مدیریت کشینگ در برنامه‌های ری‌اکت ارائه می‌دهد. با کش کردن نتایج عملیات پرهزینه، می‌توانید به طور قابل توجهی عملکرد را بهبود بخشید، درخواست‌های شبکه را کاهش دهید و منطق دریافت داده خود را ساده کنید. هنگامی که در ترکیب با Suspense و کامپوننت‌های سرور ری‌اکت استفاده می‌شود، experimental_useCache می‌تواند تجربه کاربری را بیشتر بهبود بخشد و عملکرد رندرینگ سرور را بهینه کند.

با این حال، مهم است که از محدودیت‌ها و معایب بالقوه experimental_useCache آگاه باشید، مانند عدم وجود بی‌اعتبار کردن داخلی کش و پتانسیل افزایش مصرف حافظه. با دنبال کردن بهترین شیوه‌های ذکر شده در این راهنما و در نظر گرفتن دقیق نیازهای خاص برنامه خود، می‌توانید به طور مؤثر از experimental_useCache برای دستیابی به بهبود عملکرد قابل توجه و ارائه تجربه کاربری بهتر استفاده کنید.

به یاد داشته باشید که از آخرین به‌روزرسانی‌های APIهای آزمایشی ری‌اکت مطلع بمانید و آماده باشید تا در صورت لزوم کد خود را تطبیق دهید. همانطور که ری‌اکت به تکامل خود ادامه می‌دهد، تکنیک‌های کشینگ مانند experimental_useCache نقش مهمی در ساخت برنامه‌های وب با کارایی بالا و مقیاس‌پذیر ایفا خواهند کرد.