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

// Simulácia volania API (nahraďte skutočným koncovým bodom API)
const fetchUserData = async (userId) => {
  console.log(`Načítavam dáta pre používateľa s ID: ${userId}`);
  await new Promise(resolve => setTimeout(resolve, 1000)); // Simulácia sieťovej latencie
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Nepodarilo sa načítať dáta používateľa: ${response.status}`);
  }
  return response.json();
};

// Vytvorenie cachovanej verzie funkcie fetchUserData
const getCachedUserData = experimental_useCache(fetchUserData);

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

  return (
    

      
Profil používateľa
      
Meno: {userData.name}
      
Email: {userData.email}
    
  );
}

function App() {
  return (
    Načítavajú sa dáta používateľa...

Vysvetlenie:

1. Import experimental_useCache: Importujeme potrebný hook z Reactu.
2. Definícia fetchUserData: Táto funkcia simuluje načítanie dát používateľa z API. Nahraďte fiktívne volanie API vašou skutočnou logikou načítavania dát. await new Promise simuluje sieťovú latenciu, čím sa efekt cachovania stáva zreteľnejším. Zahrnuté je aj spracovanie chýb pre produkčnú pripravenosť.
3. Vytvorenie getCachedUserData: Použijeme experimental_useCache na vytvorenie cachovanej verzie funkcie fetchUserData. Toto je funkcia, ktorú budeme reálne používať v našom komponente.
4. Použitie getCachedUserData v UserProfile: Komponent UserProfile volá getCachedUserData na získanie dát používateľa. Keďže používame experimental_useCache, dáta budú načítané z cache, ak sú už dostupné.
5. Obalenie pomocou Suspense: Komponent UserProfile je obalený komponentom Suspense na spracovanie stavu načítavania, kým sa dáta načítavajú. To zaisťuje plynulý používateľský zážitok, aj keď načítanie dát chvíľu trvá.
6. Viacnásobné volania: Komponent App renderuje dva komponenty UserProfile s rovnakým userId (1). Druhý komponent UserProfile použije dáta z cache, čím sa vyhne druhému volaniu API. Zároveň obsahuje profil iného používateľa s iným ID, aby sa demonštrovalo načítanie necachovaných dát.

V tomto príklade prvý komponent UserProfile načíta dáta používateľa z API. Avšak druhý komponent UserProfile použije dáta z cache, čím sa vyhne druhému volaniu API. To môže výrazne zlepšiť výkon, najmä ak je volanie API náročné alebo ak k dátam pristupuje mnoho komponentov.

Integrácia so Suspense

experimental_useCache je navrhnutý tak, aby bezproblémovo spolupracoval s funkciou Suspense v Reacte. Suspense vám umožňuje deklaratívne spracovať stav načítavania komponentov, ktoré čakajú na dáta. Keď použijete experimental_useCache v spojení so Suspense, React automaticky pozastaví renderovanie komponentu, kým dáta nebudú dostupné v cache alebo kým nebudú načítané zo zdroja dát. To vám umožní poskytnúť lepší používateľský zážitok zobrazením záložného UI (napr. načítavacieho indikátora), kým sa dáta načítavajú.

V príklade vyššie komponent Suspense obaluje komponent UserProfile a poskytuje mu prop fallback. Toto záložné UI sa zobrazí, kým sa načítavajú dáta používateľa. Akonáhle sú dáta dostupné, komponent UserProfile sa vyrenderuje s načítanými dátami.

React Server Components (RSC) a experimental_useCache

experimental_useCache exceluje pri použití s React Server Components. V RSC sa načítavanie dát deje na serveri a výsledky sa streamujú klientovi. experimental_useCache môže výrazne optimalizovať načítavanie dát na strane servera tým, že zabezpečí, aby sa dáta načítali iba raz za požiadavku, aj keď tie isté dáta potrebuje viacero komponentov.

Predstavte si scenár, kde máte serverový komponent, ktorý potrebuje načítať dáta používateľa a zobraziť ich vo viacerých častiach UI. Bez experimental_useCache by ste mohli skončiť s viacnásobným načítaním dát používateľa, čo môže byť neefektívne. S experimental_useCache môžete zabezpečiť, že dáta používateľa sa načítajú iba raz a potom sa cachujú pre následné použitie v rámci tej istej požiadavky na server.

Príklad (Konceptuálny príklad RSC):

// Serverový komponent
import { experimental_useCache } from 'react';

async function fetchUserData(userId) {
  // Simulácia načítania dát používateľa z databázy
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulácia latencie databázového dopytu
  return { id: userId, name: `Používateľ ${userId}`, email: `user${userId}@example.com` };
}

const getCachedUserData = experimental_useCache(fetchUserData);

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

  return (
    

      
Vitajte, {userData.name}!
      
      
    
  );
}

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

      
Informácie o používateľovi
      
Email: {userData.email}
    
  );
}

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

      
Nedávna aktivita
      
{userData.name} si prezrel domovskú stránku.
    
  );
}

V tomto zjednodušenom príklade sú UserDashboard, UserInfo a UserActivity všetko Serverové komponenty. Všetky potrebujú prístup k dátam používateľa. Použitie experimental_useCache zabezpečuje, že funkcia fetchUserData sa volá iba raz za požiadavku na server, aj keď sa používa vo viacerých komponentoch.

Úvahy a potenciálne nevýhody

Hoci experimental_useCache ponúka značné výhody, je dôležité si byť vedomý jeho obmedzení a potenciálnych nevýhod:

• Experimentálny stav: Ako experimentálne API je experimental_useCache predmetom zmien alebo odstránenia v budúcich vydaniach Reactu. Používajte ho s opatrnosťou v produkčných prostrediach a buďte pripravení prispôsobiť svoj kód v prípade potreby. Sledujte oficiálnu dokumentáciu a poznámky k vydaniam Reactu pre aktualizácie.
• Invalidácia cache: experimental_useCache neposkytuje vstavané mechanizmy na invalidáciu cache. Budete si musieť implementovať vlastné stratégie na zneplatnenie cache, keď sa podkladové dáta zmenia. To môže zahŕňať použitie vlastných hookov alebo context providerov na správu životnosti cache.
• Využitie pamäte: Cachovanie dát môže zvýšiť využitie pamäte. Dávajte pozor na veľkosť dát, ktoré cachujete, a zvážte použitie techník ako je vyradenie z cache (eviction) alebo expirácia na obmedzenie spotreby pamäte. Monitorujte využitie pamäte vo vašej aplikácii, najmä v prostrediach na strane servera.
• Serializácia argumentov: Argumenty odovzdané cachovanej funkcii musia byť serializovateľné. Je to preto, lebo experimental_useCache používa argumenty na generovanie kľúča cache. Ak argumenty nie sú serializovateľné, cache nemusí fungovať správne.
• Ladenie: Ladenie problémov s cachovaním môže byť náročné. Používajte logovanie a ladiace nástroje na kontrolu cache a overenie, či sa správa podľa očakávaní. Zvážte pridanie vlastného ladiaceho logovania do vašej funkcie fetchUserData, aby ste sledovali, kedy sa dáta načítavajú a kedy sa získavajú z cache.
• Globálny stav: Vyhnite sa používaniu globálneho meniteľného stavu v rámci cachovanej funkcie. To môže viesť k neočakávanému správaniu a sťažiť uvažovanie o cache. Spoliehajte sa na argumenty funkcie a cachovaný výsledok, aby ste udržali konzistentný stav.
• Zložité dátové štruktúry: Buďte opatrní pri cachovaní zložitých dátových štruktúr, najmä ak obsahujú cyklické referencie. Cyklické referencie môžu viesť k nekonečným slučkám alebo chybám pretečenia zásobníka (stack overflow) počas serializácie.

Stratégie invalidácie cache

Keďže experimental_useCache nerieši invalidáciu, tu sú niektoré stratégie, ktoré môžete použiť:

• Manuálna invalidácia: Implementujte vlastný hook alebo context provider na sledovanie mutácií dát. Keď dôjde k mutácii, zneplatnite cache resetovaním cachovanej funkcie. To zahŕňa uloženie verzie alebo časovej značky, ktorá sa pri mutácii zmení, a kontrolu tejto hodnoty v rámci funkcie `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("Načítavam dáta s verziou:", version)
          await new Promise(resolve => setTimeout(resolve, 500));
          return { data: `Dáta pre verziu ${version}` };
       }
  
       const useCachedData = () => {
         const { version } = useContext(DataVersionContext);
         return experimental_useCache(() => fetchData(version))(); // Zavolanie cache
       };
  
       export function useInvalidateData() {
         return useContext(DataVersionContext).invalidate;
       }
  
       export default useCachedData;
  
       // Príklad použitia:
       function ComponentUsingData() {
         const data = useCachedData();
         return 
  {data?.data}
  ;
       }
  
       function ComponentThatInvalidates() {
          const invalidate = useInvalidateData();
          return Zneplatniť Cache
       }
  
       // Obaľte vašu aplikáciu s DataVersionProvider
       // 
       //   
       //   
       // 
       
       

• Expirácia na základe času: Implementujte mechanizmus expirácie cache, ktorý automaticky zneplatní cache po určitom časovom období. To môže byť užitočné pre dáta, ktoré sú relatívne statické, ale môžu sa občas meniť.
• Invalidácia na základe značiek (tagov): Priraďte značky k cachovaným dátam a zneplatnite cache na základe týchto značiek. To môže byť užitočné na zneplatnenie súvisiacich dát, keď sa zmení konkrétna časť dát.
• WebSockety a aktualizácie v reálnom čase: Ak vaša aplikácia používa WebSockety alebo iné mechanizmy aktualizácií v reálnom čase, môžete tieto aktualizácie použiť na spustenie invalidácie cache. Keď je prijatá aktualizácia v reálnom čase, zneplatnite cache pre ovplyvnené dáta.

Najlepšie postupy pre používanie experimental_useCache

Aby ste efektívne využili experimental_useCache a vyhli sa potenciálnym nástrahám, dodržiavajte tieto osvedčené postupy:

• Používajte ho pre náročné operácie: Používajte experimental_useCache iba pre operácie, ktoré sú skutočne náročné, ako je načítavanie dát alebo zložité výpočty. Cachovanie nenáročných operácií môže v skutočnosti znížiť výkon kvôli réžii správy cache.
• Definujte jasné kľúče cache: Zabezpečte, aby argumenty odovzdané cachovanej funkcii jednoznačne identifikovali cachované dáta. To je kľúčové pre zabezpečenie správneho fungovania cache a aby sa dáta nechtiac opätovne nepoužili. Pre argumenty typu objekt zvážte ich serializáciu a hašovanie, aby ste vytvorili konzistentný kľúč.
• Implementujte stratégie invalidácie cache: Ako už bolo spomenuté, budete si musieť implementovať vlastné stratégie na zneplatnenie cache, keď sa podkladové dáta zmenia. Vyberte si stratégiu, ktorá je vhodná pre vašu aplikáciu a dáta.
• Monitorujte výkon cache: Monitorujte výkon vašej cache, aby ste sa uistili, že funguje podľa očakávaní. Používajte logovanie a ladiace nástroje na sledovanie zásahov a zlyhaní cache a identifikáciu potenciálnych úzkych miest.
• Zvážte alternatívy: Pred použitím experimental_useCache zvážte, či by iné riešenia cachovania neboli vhodnejšie pre vaše potreby. Napríklad, ak potrebujete robustnejšie riešenie cachovania so vstavanými funkciami ako je invalidácia a vyradenie z cache, mohli by ste zvážiť použitie špecializovanej knižnice na cachovanie. Knižnice ako `react-query`, `SWR` alebo dokonca použitie `localStorage` môžu byť niekedy vhodnejšie.
• Začnite v malom: Zavádzajte experimental_useCache do vašej aplikácie postupne. Začnite cachovaním niekoľkých kľúčových operácií načítavania dát a postupne rozširujte jeho použitie, ako budete získavať viac skúseností.
• Dokumentujte svoju stratégiu cachovania: Jasne zdokumentujte svoju stratégiu cachovania, vrátane toho, ktoré dáta sa cachujú, ako sa cache invaliduje a akékoľvek potenciálne obmedzenia. To uľahčí ostatným vývojárom pochopenie a údržbu vášho kódu.
• Dôkladne testujte: Dôkladne testujte svoju implementáciu cachovania, aby ste sa uistili, že funguje správne a že nezavádza žiadne neočakávané chyby. Píšte jednotkové testy na overenie, či sa cache napĺňa a invaliduje podľa očakávaní.

Alternatívy k experimental_useCache

Hoci experimental_useCache poskytuje pohodlný spôsob správy cachovania v rámci Reactu, nie je to jediná dostupná možnosť. V React aplikáciách je možné použiť niekoľko ďalších riešení cachovania, z ktorých každé má svoje vlastné výhody a nevýhody.

• useMemo: Hook useMemo sa dá použiť na memoizáciu výsledkov náročných výpočtov. Hoci neposkytuje skutočné cachovanie naprieč renderovaniami, môže byť užitočný na optimalizáciu výkonu v rámci jedného komponentu. Je menej vhodný na načítavanie dát alebo scenáre, kde je potrebné dáta zdieľať medzi komponentmi.
• React.memo: React.memo je komponent vyššieho rádu, ktorý sa dá použiť na memoizáciu funkčných komponentov. Zabraňuje opakovanému renderovaniu komponentu, ak sa jeho props nezmenili. To môže v niektorých prípadoch zlepšiť výkon, ale neposkytuje cachovanie dát.
• Externé knižnice na cachovanie (react-query, SWR): Knižnice ako react-query a SWR poskytujú komplexné riešenia na načítavanie dát a cachovanie pre React aplikácie. Tieto knižnice ponúkajú funkcie ako automatická invalidácia cache, načítavanie dát na pozadí a optimistické aktualizácie. Môžu byť dobrou voľbou, ak potrebujete robustnejšie riešenie cachovania s pokročilými funkciami.
• Local Storage / Session Storage: Pre jednoduchšie prípady použitia alebo pretrvávanie dát medzi reláciami je možné využiť `localStorage` alebo `sessionStorage`. Je však potrebné manuálne spravovať serializáciu, invalidáciu a limity úložiska.
• Vlastné riešenia cachovania: Môžete si tiež vytvoriť vlastné riešenia cachovania pomocou React context API alebo iných techník správy stavu. To vám dáva úplnú kontrolu nad implementáciou cachovania, ale vyžaduje si to aj viac úsilia a odborných znalostí.

Záver

Hook experimental_useCache v Reacte ponúka výkonný a pohodlný spôsob správy cachovania v rámci React aplikácií. Cachovaním výsledkov náročných operácií môžete výrazne zlepšiť výkon, znížiť počet sieťových požiadaviek a zjednodušiť logiku načítavania dát. Pri použití v spojení so Suspense a React Server Components môže experimental_useCache ďalej zlepšiť používateľský zážitok a optimalizovať výkon renderovania na serveri.

Je však dôležité si byť vedomý obmedzení a potenciálnych nevýhod experimental_useCache, ako je absencia vstavanej invalidácie cache a potenciálne zvýšenie využitia pamäte. Dodržiavaním osvedčených postupov uvedených v tomto sprievodcovi a dôkladným zvážením špecifických potrieb vašej aplikácie môžete efektívne využiť experimental_useCache na odomknutie významných výkonnostných ziskov a poskytnutie lepšieho používateľského zážitku.

Nezabudnite zostať informovaní o najnovších aktualizáciách experimentálnych API Reactu a buďte pripravení podľa potreby prispôsobiť svoj kód. Ako sa React naďalej vyvíja, techniky cachovania ako experimental_useCache budú hrať čoraz dôležitejšiu úlohu pri budovaní vysoko výkonných a škálovateľných webových aplikácií.