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

// API hívás szimulálása (cserélje le a saját API végpontjára)
const fetchUserData = async (userId) => {
  console.log(`Felhasználói adatok lekérése a következő ID-val: ${userId}`);
  await new Promise(resolve => setTimeout(resolve, 1000)); // Hálózati késleltetés szimulálása
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Nem sikerült a felhasználói adatokat lekérni: ${response.status}`);
  }
  return response.json();
};

// A fetchUserData függvény gyorsítótárazott verziójának létrehozása
const getCachedUserData = experimental_useCache(fetchUserData);

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

  return (
    

      
Felhasználói profil
      
Név: {userData.name}
      
Email: {userData.email}
    
  );
}

function App() {
  return (
    Felhasználói adatok betöltése...

Magyarázat:

1. experimental_useCache importálása: Importáljuk a szükséges hookot a React-ből.
2. fetchUserData definiálása: Ez a függvény szimulálja a felhasználói adatok lekérését egy API-ból. Cserélje le a minta API hívást a saját adatlekérési logikájára. Az await new Promise hálózati késleltetést szimulál, ami láthatóbbá teszi a gyorsítótárazás hatását. A hibakezelés a production-kész állapot érdekében került bele.
3. getCachedUserData létrehozása: Az experimental_useCache segítségével létrehozzuk a fetchUserData függvény gyorsítótárazott verzióját. Ezt a függvényt fogjuk ténylegesen használni a komponensünkben.
4. getCachedUserData használata a UserProfile-ban: A UserProfile komponens a getCachedUserData függvényt hívja meg a felhasználói adatok lekéréséhez. Mivel az experimental_useCache-t használjuk, az adat a gyorsítótárból kerül lekérésre, ha már rendelkezésre áll.
5. Csomagolás Suspense-szel: A UserProfile komponenst Suspense-be csomagoljuk, hogy kezeljük a betöltési állapotot, amíg az adatok lekérése folyamatban van. Ez zökkenőmentes felhasználói élményt biztosít, még akkor is, ha az adatok betöltése időbe telik.
6. Többszöri hívás: Az App komponens két UserProfile komponenst renderel ugyanazzal a userId-val (1). A második UserProfile komponens a gyorsítótárazott adatot fogja használni, elkerülve a második API hívást. Tartalmaz egy másik felhasználói profilt is egy másik ID-val, hogy bemutassa a nem gyorsítótárazott adatok lekérését.

Ebben a példában az első UserProfile komponens lekéri a felhasználói adatokat az API-ból. A második UserProfile komponens azonban a gyorsítótárazott adatokat fogja használni, elkerülve a második API hívást. Ez jelentősen javíthatja a teljesítményt, különösen, ha az API hívás költséges, vagy ha az adathoz sok komponens fér hozzá.

Integráció a Suspense-szel

Az experimental_useCache zökkenőmentesen működik együtt a React Suspense funkciójával. A Suspense lehetővé teszi, hogy deklaratívan kezelje azoknak a komponenseknek a betöltési állapotát, amelyek adatok betöltésére várnak. Amikor az experimental_useCache-t a Suspense-szel együtt használja, a React automatikusan felfüggeszti a komponens renderelését, amíg az adatok rendelkezésre nem állnak a gyorsítótárban, vagy le nem kérték az adatforrásból. Ez lehetővé teszi, hogy jobb felhasználói élményt nyújtson egy fallback UI (pl. egy betöltésjelző) megjelenítésével, amíg az adatok betöltődnek.

A fenti példában a Suspense komponens becsomagolja a UserProfile komponenst, és egy fallback propot biztosít. Ez a fallback UI jelenik meg, amíg a felhasználói adatok lekérése folyamatban van. Amint az adatok rendelkezésre állnak, a UserProfile komponens a lekért adatokkal fog renderelődni.

React Server Components (RSC) és az experimental_useCache

Az experimental_useCache különösen hatékony a React Server Components-szel használva. Az RSC-kben az adatlekérés a szerveren történik, és az eredményeket a kliens felé streamelik. Az experimental_useCache jelentősen optimalizálhatja a szerveroldali adatlekérést azáltal, hogy biztosítja, hogy az adatok kérésenként csak egyszer kerüljenek lekérésre, még akkor is, ha több komponensnek is ugyanarra az adatra van szüksége.

Vegyünk egy olyan forgatókönyvet, ahol van egy szerver komponens, amelynek le kell kérnie a felhasználói adatokat, és meg kell jelenítenie azokat az UI több részén. Az experimental_useCache nélkül előfordulhat, hogy többször is le kell kérnie a felhasználói adatokat, ami nem hatékony. Az experimental_useCache segítségével biztosíthatja, hogy a felhasználói adatok csak egyszer kerüljenek lekérésre, majd gyorsítótárazva legyenek a későbbi felhasználásokhoz ugyanazon szerver kérésen belül.

Példa (Koncepcionális RSC példa):

// Szerver Komponens
import { experimental_useCache } from 'react';

async function fetchUserData(userId) {
  // Felhasználói adatok lekérésének szimulálása adatbázisból
  await new Promise(resolve => setTimeout(resolve, 500)); // Adatbázis-lekérdezési késleltetés szimulálása
  return { id: userId, name: `Felhasználó ${userId}`, email: `user${userId}@example.com` };
}

const getCachedUserData = experimental_useCache(fetchUserData);

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

  return (
    

      
Üdvözöljük, {userData.name}!
      
      
    
  );
}

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

      
Felhasználói információk
      
Email: {userData.email}
    
  );
}

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

      
Legutóbbi tevékenység
      
{userData.name} megtekintette a főoldalt.
    
  );
}

Ebben az egyszerűsített példában a UserDashboard, UserInfo, és UserActivity mind szerver komponensek. Mindegyiknek szüksége van a felhasználói adatokra. Az experimental_useCache használata biztosítja, hogy a fetchUserData függvény szerver kérésenként csak egyszer hívódik meg, annak ellenére, hogy több komponens is használja.

Megfontolások és lehetséges hátrányok

Bár az experimental_useCache jelentős előnyökkel jár, fontos tisztában lenni a korlátaival és lehetséges hátrányaival:

• Kísérleti státusz: Kísérleti API-ként az experimental_useCache változhat vagy eltávolításra kerülhet a jövőbeli React kiadásokban. Óvatosan használja éles környezetben, és készüljön fel a kódjának szükség szerinti adaptálására. Figyelje a React hivatalos dokumentációját és kiadási jegyzeteit a frissítésekért.
• Gyorsítótár érvénytelenítése: Az experimental_useCache nem biztosít beépített mechanizmusokat a gyorsítótár érvénytelenítésére. Saját stratégiákat kell implementálnia a gyorsítótár érvénytelenítésére, amikor az alapul szolgáló adatok megváltoznak. Ez magában foglalhatja egyéni hookok vagy kontextus providerek használatát a gyorsítótár élettartamának kezelésére.
• Memóriahasználat: Az adatok gyorsítótárazása növelheti a memóriahasználatot. Legyen tisztában a gyorsítótárazott adatok méretével, és fontolja meg olyan technikák alkalmazását, mint a gyorsítótár kiürítése (eviction) vagy lejárata (expiration) a memóriafogyasztás korlátozása érdekében. Figyelje az alkalmazás memóriahasználatát, különösen szerveroldali környezetekben.
• Argumentumok szerializálása: A gyorsítótárazott függvénynek átadott argumentumoknak szerializálhatónak kell lenniük. Ennek oka, hogy az experimental_useCache az argumentumokat használja a gyorsítótár kulcsának generálásához. Ha az argumentumok nem szerializálhatók, a gyorsítótár nem működhet megfelelően.
• Hibakeresés: A gyorsítótárazási problémák hibakeresése kihívást jelenthet. Használjon naplózási és hibakereső eszközöket a gyorsítótár vizsgálatára és annak ellenőrzésére, hogy az elvárt módon viselkedik-e. Fontolja meg egyéni hibakeresési naplózás hozzáadását a fetchUserData függvényhez, hogy nyomon kövesse, mikor történik adatlekérés és mikor kerül elő az adat a gyorsítótárból.
• Globális állapot: Kerülje a globális, módosítható állapot használatát a gyorsítótárazott függvényen belül. Ez váratlan viselkedéshez vezethet, és megnehezítheti a gyorsítótár működésének megértését. Támaszkodjon a függvény argumentumaira és a gyorsítótárazott eredményre a konzisztens állapot fenntartása érdekében.
• Komplex adatszerkezetek: Legyen óvatos a komplex adatszerkezetek gyorsítótárazásakor, különösen, ha azok körkörös hivatkozásokat tartalmaznak. A körkörös hivatkozások végtelen ciklusokhoz vagy stack overflow hibákhoz vezethetnek a szerializálás során.

Gyorsítótár érvénytelenítési stratégiák

Mivel az experimental_useCache nem kezeli az érvénytelenítést, íme néhány stratégia, amit alkalmazhat:

• Manuális érvénytelenítés: Implementáljon egy egyéni hookot vagy kontextus providert az adatváltozások követésére. Amikor egy változás történik, érvénytelenítse a gyorsítótárat a gyorsítótárazott függvény visszaállításával. Ez magában foglalja egy verzió vagy időbélyeg tárolását, amely a változáskor megváltozik, és ennek ellenőrzését a `fetch` függvényen belül.

       
       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("Adatok lekérése a következő verzióval:", version)
          await new Promise(resolve => setTimeout(resolve, 500));
          return { data: `Adatok a ${version} verzióhoz` };
       }
  
       const useCachedData = () => {
         const { version } = useContext(DataVersionContext);
         return experimental_useCache(() => fetchData(version))(); // A gyorsítótár meghívása
       };
  
       export function useInvalidateData() {
         return useContext(DataVersionContext).invalidate;
       }
  
       export default useCachedData;
  
       // Példa a használatra:
       function ComponentUsingData() {
         const data = useCachedData();
         return 
  {data?.data}
  ;
       }
  
       function ComponentThatInvalidates() {
          const invalidate = useInvalidateData();
          return Gyorsítótár érvénytelenítése
       }
  
       // Csomagolja be az App-ot a DataVersionProvider-be
       // 
       //   
       //   
       // 
       
       

• Időalapú lejárat: Implementáljon egy gyorsítótár lejárati mechanizmust, amely automatikusan érvényteleníti a gyorsítótárat egy bizonyos idő elteltével. Ez hasznos lehet olyan adatok esetében, amelyek viszonylag statikusak, de időnként változhatnak.
• Címkealapú érvénytelenítés: Társítson címkéket a gyorsítótárazott adatokhoz, és ezen címkék alapján érvénytelenítse a gyorsítótárat. Ez hasznos lehet a kapcsolódó adatok érvénytelenítésére, amikor egy adott adatelem megváltozik.
• WebSocketek és valós idejű frissítések: Ha az alkalmazása WebSocketeket vagy más valós idejű frissítési mechanizmusokat használ, ezekkel a frissítésekkel kiválthatja a gyorsítótár érvénytelenítését. Amikor egy valós idejű frissítés érkezik, érvénytelenítse az érintett adatok gyorsítótárát.

Bevált gyakorlatok az experimental_useCache használatához

Az experimental_useCache hatékony kihasználásához és a lehetséges buktatók elkerüléséhez kövesse az alábbi bevált gyakorlatokat:

• Használja költséges műveletekhez: Csak olyan műveletekhez használja az experimental_useCache-t, amelyek valóban költségesek, mint például az adatlekérés vagy a komplex számítások. Az olcsó műveletek gyorsítótárazása a gyorsítótár-kezelés többletköltsége miatt valójában csökkentheti a teljesítményt.
• Definiáljon egyértelmű gyorsítótárkulcsokat: Győződjön meg arról, hogy a gyorsítótárazott függvénynek átadott argumentumok egyedileg azonosítják a gyorsítótárazott adatokat. Ez kulcsfontosságú a gyorsítótár helyes működéséhez és annak elkerüléséhez, hogy az adatok véletlenül újra felhasználásra kerüljenek. Objektum argumentumok esetén fontolja meg azok szerializálását és hashelését egy konzisztens kulcs létrehozásához.
• Implementáljon gyorsítótár érvénytelenítési stratégiákat: Ahogy korábban említettük, saját stratégiákat kell implementálnia a gyorsítótár érvénytelenítésére, amikor az alapul szolgáló adatok megváltoznak. Válasszon az alkalmazásának és az adatoknak megfelelő stratégiát.
• Figyelje a gyorsítótár teljesítményét: Figyelje a gyorsítótár teljesítményét, hogy megbizonyosodjon arról, hogy az elvárt módon működik. Használjon naplózási és hibakereső eszközöket a gyorsítótár-találatok és -hibák nyomon követésére és a lehetséges szűk keresztmetszetek azonosítására.
• Fontolja meg az alternatívákat: Mielőtt az experimental_useCache-t használná, fontolja meg, hogy más gyorsítótárazási megoldások megfelelőbbek lennének-e az Ön igényeinek. Például, ha egy robusztusabb gyorsítótárazási megoldásra van szüksége beépített funkciókkal, mint a gyorsítótár érvénytelenítése és kiürítése, fontolja meg egy dedikált gyorsítótárazási könyvtár használatát. Az olyan könyvtárak, mint a `react-query`, `SWR`, vagy akár a `localStorage` használata néha megfelelőbb lehet.
• Kezdje kicsiben: Vezesse be az experimental_useCache-t fokozatosan az alkalmazásában. Kezdje néhány kulcsfontosságú adatlekérési művelet gyorsítótárazásával, és fokozatosan bővítse a használatát, ahogy több tapasztalatot szerez.
• Dokumentálja a gyorsítótárazási stratégiáját: Dokumentálja egyértelműen a gyorsítótárazási stratégiáját, beleértve, hogy mely adatok kerülnek gyorsítótárazásra, hogyan történik a gyorsítótár érvénytelenítése, és milyen lehetséges korlátozások vannak. Ez megkönnyíti a többi fejlesztő számára a kód megértését és karbantartását.
• Teszteljen alaposan: Tesztelje alaposan a gyorsítótárazási implementációját, hogy megbizonyosodjon arról, hogy helyesen működik, és nem vezet be váratlan hibákat. Írjon egységteszteket annak ellenőrzésére, hogy a gyorsítótár az elvárt módon töltődik fel és érvénytelenül.

Az experimental_useCache alternatívái

Bár az experimental_useCache kényelmes módot kínál a gyorsítótárazás kezelésére a React-en belül, nem ez az egyetlen elérhető lehetőség. Számos más gyorsítótárazási megoldás használható a React alkalmazásokban, mindegyiknek megvannak a maga előnyei és hátrányai.

• useMemo: A useMemo hook használható a költséges számítások eredményeinek memoizálására. Bár nem nyújt valódi gyorsítótárazást a renderelések között, hasznos lehet a teljesítmény optimalizálására egyetlen komponensen belül. Kevésbé alkalmas adatlekérésre vagy olyan esetekre, ahol az adatokat meg kell osztani a komponensek között.
• React.memo: A React.memo egy magasabb rendű komponens (higher-order component), amely funkcionális komponensek memoizálására használható. Megakadályozza a komponens újrarenderelését, ha a propjai nem változtak. Ez bizonyos esetekben javíthatja a teljesítményt, de nem biztosít adatgyorsítótárazást.
• Külső gyorsítótárazási könyvtárak (react-query, SWR): Az olyan könyvtárak, mint a react-query és az SWR, átfogó adatlekérési és gyorsítótárazási megoldásokat kínálnak a React alkalmazásokhoz. Ezek a könyvtárak olyan funkciókat kínálnak, mint az automatikus gyorsítótár érvénytelenítés, a háttérben történő adatlekérés és az optimista frissítések. Jó választás lehet, ha egy robusztusabb, fejlett funkciókkal rendelkező gyorsítótárazási megoldásra van szüksége.
• Local Storage / Session Storage: Egyszerűbb használati esetekhez vagy az adatok munkamenetek közötti megőrzéséhez a `localStorage` vagy a `sessionStorage` használható. Azonban a szerializálás, az érvénytelenítés és a tárolási korlátok manuális kezelése szükséges.
• Egyéni gyorsítótárazási megoldások: Építhet saját egyéni gyorsítótárazási megoldásokat is a React kontextus API-jával vagy más állapotkezelési technikákkal. Ez teljes kontrollt ad a gyorsítótárazás implementációja felett, de több erőfeszítést és szakértelmet is igényel.

Összegzés

A React experimental_useCache hookja egy erőteljes és kényelmes módot kínál a gyorsítótárazás kezelésére a React alkalmazásokban. A költséges műveletek eredményeinek gyorsítótárazásával jelentősen javíthatja a teljesítményt, csökkentheti a hálózati kéréseket és egyszerűsítheti az adatlekérési logikát. A Suspense-szel és a React Server Components-szel együtt használva az experimental_useCache tovább javíthatja a felhasználói élményt és optimalizálhatja a szerveroldali renderelési teljesítményt.

Fontos azonban tisztában lenni az experimental_useCache korlátaival és lehetséges hátrányaival, mint például a beépített gyorsítótár érvénytelenítés hiánya és a megnövekedett memóriahasználat lehetősége. Az ebben az útmutatóban vázolt bevált gyakorlatok követésével és az alkalmazás specifikus igényeinek gondos mérlegelésével hatékonyan használhatja az experimental_useCache-t a jelentős teljesítménynövekedés eléréséhez és a jobb felhasználói élmény biztosításához.

Ne felejtsen el tájékozott maradni a React kísérleti API-jainak legújabb frissítéseiről, és készüljön fel a kódjának szükség szerinti adaptálására. Ahogy a React tovább fejlődik, az olyan gyorsítótárazási technikák, mint az experimental_useCache, egyre fontosabb szerepet fognak játszani a nagy teljesítményű és skálázható webalkalmazások építésében.