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

// Імітація виклику API (замініть на вашу реальну кінцеву точку API)
const fetchUserData = async (userId) => {
  console.log(`Отримання даних для користувача з 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(`Не вдалося отримати дані користувача: ${response.status}`);
  }
  return response.json();
};

// Створення кешованої версії функції fetchUserData
const getCachedUserData = experimental_useCache(fetchUserData);

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

  return (
    

      
Профіль користувача
      
Ім'я: {userData.name}
      
Email: {userData.email}
    
  );
}

function App() {
  return (
    Завантаження даних користувача...

Пояснення:

1. Імпорт experimental_useCache: Ми імпортуємо необхідний хук з React.
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. Він також включає інший профіль користувача з іншим ID, щоб продемонструвати отримання некешованих даних.

У цьому прикладі перший компонент UserProfile отримає дані користувача з API. Однак другий компонент UserProfile використає кешовані дані, уникаючи другого виклику API. Це може значно покращити продуктивність, особливо якщо виклик API є дорогим або якщо до даних звертаються багато компонентів.

Інтеграція з Suspense

experimental_useCache розроблений для безшовної роботи з функцією Suspense в React. Suspense дозволяє вам декларативно обробляти стан завантаження компонентів, які чекають на завантаження даних. Коли ви використовуєте experimental_useCache у поєднанні з Suspense, React автоматично призупинить рендеринг компонента, доки дані не стануть доступними в кеші або не будуть отримані з джерела даних. Це дозволяє вам забезпечити кращий досвід користувача, відображаючи резервний UI (наприклад, спінер завантаження), поки дані завантажуються.

У наведеному вище прикладі компонент Suspense обгортає компонент UserProfile і надає проп fallback. Цей резервний UI буде відображатися під час отримання даних користувача. Як тільки дані будуть доступні, компонент UserProfile буде відрендерений з отриманими даними.

Серверні компоненти React (RSCs) та experimental_useCache

experimental_useCache особливо ефективний при використанні з серверними компонентами React. У RSC отримання даних відбувається на сервері, а результати передаються клієнту потоком. experimental_useCache може значно оптимізувати отримання даних на сервері, гарантуючи, що дані отримуються лише один раз за запит, навіть якщо кілька компонентів потребують однакових даних.

Розглянемо сценарій, де у вас є серверний компонент, який повинен отримати дані користувача та відобразити їх у кількох частинах UI. Без 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: `Користувач ${userId}`, email: `user${userId}@example.com` };
}

const getCachedUserData = experimental_useCache(fetchUserData);

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

  return (
    

      
Вітаємо, {userData.name}!
      
      
    
  );
}

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

      
Інформація про користувача
      
Email: {userData.email}
    
  );
}

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

      
Остання активність
      
{userData.name} переглянув(ла) головну сторінку.
    
  );
}

У цьому спрощеному прикладі UserDashboard, UserInfo та UserActivity є серверними компонентами. Всі вони потребують доступу до даних користувача. Використання experimental_useCache гарантує, що функція fetchUserData викликається лише один раз за серверний запит, хоча вона використовується в кількох компонентах.

Міркування та потенційні недоліки

Хоча experimental_useCache пропонує значні переваги, важливо знати про його обмеження та потенційні недоліки:

• Експериментальний статус: Як експериментальний API, experimental_useCache може бути змінений або видалений у майбутніх версіях React. Використовуйте його з обережністю в продакшен-середовищах і будьте готові адаптувати свій код за необхідності. Слідкуйте за офіційною документацією React та примітками до випусків для оновлень.
• Інвалідація кешу: experimental_useCache не надає вбудованих механізмів для інвалідації кешу. Вам доведеться реалізовувати власні стратегії для інвалідації кешу, коли базові дані змінюються. Це може включати використання кастомних хуків або провайдерів контексту для керування часом життя кешу.
• Використання пам'яті: Кешування даних може збільшити використання пам'яті. Будьте уважні до розміру даних, які ви кешуєте, і розгляньте можливість використання технік, таких як витіснення або закінчення терміну дії кешу, для обмеження споживання пам'яті. Слідкуйте за використанням пам'яті у вашому застосунку, особливо в серверних середовищах.
• Серіалізація аргументів: Аргументи, передані в кешовану функцію, повинні бути серіалізованими. Це тому, що experimental_useCache використовує аргументи для генерації ключа кешу. Якщо аргументи не є серіалізованими, кеш може працювати неправильно.
• Налагодження: Налагодження проблем з кешуванням може бути складним. Використовуйте логування та інструменти налагодження для перевірки кешу та переконання, що він поводиться як очікувалося. Розгляньте можливість додавання кастомного логування для налагодження до вашої функції fetchUserData, щоб відстежувати, коли дані отримуються, а коли вони витягуються з кешу.
• Глобальний стан: Уникайте використання глобального мутабельного стану всередині кешованої функції. Це може призвести до несподіваної поведінки та ускладнити розуміння роботи кешу. Покладайтеся на аргументи функції та кешований результат для підтримки узгодженого стану.
• Складні структури даних: Будьте обережні при кешуванні складних структур даних, особливо якщо вони містять циклічні посилання. Циклічні посилання можуть призвести до нескінченних циклів або помилок переповнення стеку під час серіалізації.

Стратегії інвалідації кешу

Оскільки experimental_useCache не обробляє інвалідацію, ось кілька стратегій, які ви можете застосувати:

• Ручна інвалідація: Реалізуйте кастомний хук або провайдер контексту для відстеження мутацій даних. Коли відбувається мутація, інвалідуйте кеш, скинувши кешовану функцію. Це передбачає зберігання версії або мітки часу, яка змінюється при мутації, та перевірку цього всередині функції 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: `Дані для версії ${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 Інвалідувати кеш
       }
  
       // Огорніть ваш застосунок у DataVersionProvider
       // 
       //   
       //   
       // 
       
       

• Закінчення терміну дії за часом: Реалізуйте механізм закінчення терміну дії кешу, який автоматично інвалідує кеш через певний проміжок часу. Це може бути корисно для даних, які є відносно статичними, але можуть час від часу змінюватися.
• Інвалідація за тегами: Пов'язуйте теги з кешованими даними та інвалідуйте кеш на основі цих тегів. Це може бути корисно для інвалідації пов'язаних даних, коли змінюється конкретний елемент даних.
• WebSockets та оновлення в реальному часі: Якщо ваш застосунок використовує WebSockets або інші механізми оновлення в реальному часі, ви можете використовувати ці оновлення для запуску інвалідації кешу. Коли отримується оновлення в реальному часі, інвалідуйте кеш для відповідних даних.

Найкращі практики використання experimental_useCache

Щоб ефективно використовувати experimental_useCache та уникнути потенційних пасток, дотримуйтесь цих найкращих практик:

• Використовуйте для дорогих операцій: Використовуйте experimental_useCache лише для операцій, які є справді дорогими, таких як отримання даних або складні обчислення. Кешування недорогих операцій може насправді знизити продуктивність через накладні витрати на управління кешем.
• Визначайте чіткі ключі кешу: Переконайтеся, що аргументи, передані в кешовану функцію, унікально ідентифікують дані, що кешуються. Це має вирішальне значення для забезпечення правильної роботи кешу та уникнення ненавмисного повторного використання даних. Для об'єктних аргументів розгляньте можливість їх серіалізації та хешування для створення узгодженого ключа.
• Впроваджуйте стратегії інвалідації кешу: Як зазначалося раніше, вам доведеться реалізувати власні стратегії інвалідації кешу, коли базові дані змінюються. Виберіть стратегію, яка відповідає вашому застосунку та даним.
• Моніторте продуктивність кешу: Моніторте продуктивність вашого кешу, щоб переконатися, що він працює як очікувалося. Використовуйте інструменти логування та налагодження для відстеження влучень та промахів кешу та виявлення потенційних вузьких місць.
• Розгляньте альтернативи: Перш ніж використовувати experimental_useCache, подумайте, чи інші рішення для кешування можуть бути більш доцільними для ваших потреб. Наприклад, якщо вам потрібне більш надійне рішення для кешування з вбудованими функціями, такими як інвалідація та витіснення кешу, ви можете розглянути використання спеціалізованої бібліотеки для кешування. Бібліотеки, такі як `react-query`, `SWR`, або навіть використання `localStorage` іноді можуть бути більш доречними.
• Починайте з малого: Вводьте experimental_useCache у ваш застосунок поступово. Почніть з кешування кількох ключових операцій отримання даних і поступово розширюйте його використання, набираючись досвіду.
• Документуйте вашу стратегію кешування: Чітко документуйте вашу стратегію кешування, включаючи, які дані кешуються, як кеш інвалідується, та будь-які потенційні обмеження. Це полегшить іншим розробникам розуміння та підтримку вашого коду.
• Ретельно тестуйте: Ретельно тестуйте вашу реалізацію кешування, щоб переконатися, що вона працює правильно і не вносить жодних несподіваних помилок. Напишіть юніт-тести для перевірки того, що кеш заповнюється та інвалідується як очікувалося.

Альтернативи experimental_useCache

Хоча experimental_useCache надає зручний спосіб керування кешуванням у React, це не єдиний доступний варіант. Існує кілька інших рішень для кешування, які можна використовувати в застосунках React, кожне зі своїми перевагами та недоліками.

• useMemo: Хук useMemo можна використовувати для мемоізації результатів дорогих обчислень. Хоча він не забезпечує справжнього кешування між рендерами, він може бути корисним для оптимізації продуктивності в межах одного компонента. Він менш підходить для отримання даних або сценаріїв, де дані потрібно спільно використовувати між компонентами.
• React.memo: React.memo — це компонент вищого порядку, який можна використовувати для мемоізації функціональних компонентів. Він запобігає повторним рендерам компонента, якщо його пропси не змінилися. Це може покращити продуктивність у деяких випадках, але не забезпечує кешування даних.
• Зовнішні бібліотеки для кешування (react-query, SWR): Бібліотеки, такі як react-query та SWR, надають комплексні рішення для отримання та кешування даних для застосунків React. Ці бібліотеки пропонують такі функції, як автоматична інвалідація кешу, фонове отримання даних та оптимістичні оновлення. Вони можуть бути хорошим вибором, якщо вам потрібне більш надійне рішення для кешування з розширеними функціями.
• Local Storage / Session Storage: Для простіших випадків використання або збереження даних між сесіями можна використовувати `localStorage` або `sessionStorage`. Однак потрібно вручну керувати серіалізацією, інвалідацією та обмеженнями зберігання.
• Кастомні рішення для кешування: Ви також можете створити власні кастомні рішення для кешування, використовуючи API контексту React або інші техніки управління станом. Це дає вам повний контроль над реалізацією кешування, але також вимагає більше зусиль та досвіду.

Висновок

Хук experimental_useCache від React пропонує потужний та зручний спосіб керування кешуванням у застосунках React. Кешуючи результати дорогих операцій, ви можете значно покращити продуктивність, зменшити кількість мережевих запитів та спростити логіку отримання даних. При використанні разом із Suspense та серверними компонентами React, experimental_useCache може ще більше покращити досвід користувача та оптимізувати продуктивність рендерингу на сервері.

Однак важливо знати про обмеження та потенційні недоліки experimental_useCache, такі як відсутність вбудованої інвалідації кешу та потенціал для збільшення використання пам'яті. Дотримуючись найкращих практик, викладених у цьому посібнику, та ретельно враховуючи конкретні потреби вашого застосунку, ви можете ефективно використовувати experimental_useCache для досягнення значного приросту продуктивності та забезпечення кращого досвіду користувача.

Не забувайте бути в курсі останніх оновлень експериментальних API React та будьте готові адаптувати свій код за необхідності. Оскільки React продовжує розвиватися, техніки кешування, такі як experimental_useCache, відіграватимуть все більш важливу роль у створенні високопродуктивних та масштабованих веб-застосунків.