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

// Simulacija API poziva (zamijenite sa svojim stvarnim API endpointom)
const fetchUserData = async (userId) => {
  console.log(`Dohvaćam korisničke podatke za ID korisnika: ${userId}`);
  await new Promise(resolve => setTimeout(resolve, 1000)); // Simulacija mrežne latencije
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Neuspješno dohvaćanje korisničkih podataka: ${response.status}`);
  }
  return response.json();
};

// Stvaranje keširane verzije funkcije 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 (
    Učitavanje korisničkih podataka...

Objašnjenje:

1. Uvoz experimental_useCache: Uvozimo potreban hook iz Reacta.
2. Definiranje fetchUserData: Ova funkcija simulira dohvaćanje korisničkih podataka s API-ja. Zamijenite lažni API poziv svojom stvarnom logikom dohvaćanja podataka. await new Promise simulira mrežnu latenciju, čineći učinak keširanja očitijim. Uključeno je rukovanje pogreškama radi spremnosti za produkciju.
3. Stvaranje getCachedUserData: Koristimo experimental_useCache kako bismo stvorili keširanu verziju funkcije fetchUserData. Ovo je funkcija koju ćemo zapravo koristiti u našoj komponenti.
4. Korištenje getCachedUserData u UserProfile: Komponenta UserProfile poziva getCachedUserData kako bi dohvatila korisničke podatke. Budući da koristimo experimental_useCache, podaci će biti dohvaćeni iz predmemorije ako su već dostupni.
5. Omotavanje sa Suspense: Komponenta UserProfile omotana je sa Suspense kako bi se upravljalo stanjem učitavanja dok se podaci dohvaćaju. To osigurava glatko korisničko iskustvo, čak i ako učitavanje podataka potraje.
6. Višestruki pozivi: Komponenta App renderira dvije UserProfile komponente s istim userId (1). Druga UserProfile komponenta će koristiti keširane podatke, izbjegavajući drugi API poziv. Također uključuje još jedan korisnički profil s različitim ID-jem kako bi se demonstriralo dohvaćanje ne-keširanih podataka.

U ovom primjeru, prva UserProfile komponenta će dohvatiti korisničke podatke s API-ja. Međutim, druga UserProfile komponenta će koristiti keširane podatke, izbjegavajući drugi API poziv. To može značajno poboljšati performanse, posebno ako je API poziv skup ili ako podacima pristupa mnogo komponenti.

Integracija sa Suspenseom

experimental_useCache je dizajniran za besprijekoran rad s Reactovom značajkom Suspense. Suspense vam omogućuje da deklarativno upravljate stanjem učitavanja komponenti koje čekaju na podatke. Kada koristite experimental_useCache u kombinaciji sa Suspenseom, React će automatski zaustaviti renderiranje komponente dok podaci ne budu dostupni u predmemoriji ili dohvaćeni iz izvora podataka. To vam omogućuje da pružite bolje korisničko iskustvo prikazivanjem zamjenskog sučelja (npr. indikatora učitavanja) dok se podaci učitavaju.

U gornjem primjeru, komponenta Suspense omotava komponentu UserProfile i pruža fallback prop. Ovo zamjensko sučelje će biti prikazano dok se korisnički podaci dohvaćaju. Kada podaci postanu dostupni, komponenta UserProfile će biti renderirana s dohvaćenim podacima.

React Server Components (RSC) i experimental_useCache

experimental_useCache dolazi do punog izražaja kada se koristi s React Server Components. U RSC-ovima, dohvaćanje podataka događa se na poslužitelju, a rezultati se streamaju klijentu. experimental_useCache može značajno optimizirati dohvaćanje podataka na strani poslužitelja osiguravajući da se podaci dohvate samo jednom po zahtjevu, čak i ako više komponenti treba iste podatke.

Razmotrite scenarij u kojem imate poslužiteljsku komponentu koja treba dohvatiti korisničke podatke i prikazati ih u više dijelova korisničkog sučelja. Bez experimental_useCache, mogli biste završiti s višestrukim dohvaćanjem korisničkih podataka, što može biti neučinkovito. S experimental_useCache, možete osigurati da se korisnički podaci dohvate samo jednom, a zatim keširaju za naknadne upotrebe unutar istog poslužiteljskog zahtjeva.

Primjer (Konceptualni RSC primjer):

// Poslužiteljska komponenta
import { experimental_useCache } from 'react';

async function fetchUserData(userId) {
  // Simulacija dohvaćanja korisničkih podataka iz baze podataka
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulacija latencije upita bazi podataka
  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.
    
  );
}

U ovom pojednostavljenom primjeru, UserDashboard, UserInfo i UserActivity su sve poslužiteljske komponente. Sve one trebaju pristup korisničkim podacima. Korištenje experimental_useCache osigurava da se funkcija fetchUserData poziva samo jednom po poslužiteljskom zahtjevu, iako se koristi u više komponenti.

Razmatranja i potencijalni nedostaci

Iako experimental_useCache nudi značajne prednosti, važno je biti svjestan njegovih ograničenja i potencijalnih nedostataka:

• Eksperimentalni status: Kao eksperimentalni API, experimental_useCache je podložan promjenama ili uklanjanju u budućim izdanjima Reacta. Koristite ga s oprezom u produkcijskim okruženjima i budite spremni prilagoditi svoj kod ako je potrebno. Pratite službenu dokumentaciju Reacta i bilješke o izdanjima za ažuriranja.
• Invalidacija predmemorije: experimental_useCache ne pruža ugrađene mehanizme za invalidaciju predmemorije. Morat ćete implementirati vlastite strategije za invalidaciju predmemorije kada se temeljni podaci promijene. To može uključivati korištenje prilagođenih hookova ili pružatelja konteksta za upravljanje životnim vijekom predmemorije.
• Potrošnja memorije: Keširanje podataka može povećati potrošnju memorije. Pazite na veličinu podataka koje keširate i razmislite o korištenju tehnika poput izbacivanja (eviction) ili isteka (expiration) predmemorije kako biste ograničili potrošnju memorije. Pratite potrošnju memorije u svojoj aplikaciji, posebno u poslužiteljskim okruženjima.
• Serijalizacija argumenata: Argumenti proslijeđeni keširanoj funkciji moraju biti serijalizabilni. To je zato što experimental_useCache koristi argumente za generiranje ključa predmemorije. Ako argumenti nisu serijalizabilni, predmemorija možda neće raditi ispravno.
• Otklanjanje pogrešaka (Debugging): Otklanjanje problema s keširanjem može biti izazovno. Koristite alate za bilježenje (logging) i otklanjanje pogrešaka kako biste pregledali predmemoriju i provjerili ponaša li se kako se očekuje. Razmislite o dodavanju prilagođenog bilježenja za otklanjanje pogrešaka u svoju funkciju fetchUserData kako biste pratili kada se podaci dohvaćaju, a kada se preuzimaju iz predmemorije.
• Globalno stanje: Izbjegavajte korištenje globalnog promjenjivog stanja unutar keširane funkcije. To može dovesti do neočekivanog ponašanja i otežati razumijevanje predmemorije. Oslonite se na argumente funkcije i keširani rezultat kako biste održali dosljedno stanje.
• Složene strukture podataka: Budite oprezni pri keširanju složenih struktura podataka, posebno ako sadrže kružne reference. Kružne reference mogu dovesti do beskonačnih petlji ili pogrešaka prekoračenja stoga (stack overflow) tijekom serijalizacije.

Strategije invalidacije predmemorije

Budući da experimental_useCache ne rukuje invalidacijom, evo nekoliko strategija koje možete primijeniti:

• Ručna invalidacija: Implementirajte prilagođeni hook ili pružatelja konteksta za praćenje mutacija podataka. Kada dođe do mutacije, invalidirajte predmemoriju resetiranjem keširane funkcije. To uključuje pohranjivanje verzije ili vremenske oznake koja se mijenja prilikom mutacije i provjeru iste unutar funkcije za dohvaćanje podataka.

       
       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("Dohvaćam podatke s verzijom:", version)
          await new Promise(resolve => setTimeout(resolve, 500));
          return { data: `Podaci za verziju ${version}` };
       }
  
       const useCachedData = () => {
         const { version } = useContext(DataVersionContext);
         return experimental_useCache(() => fetchData(version))(); // Pozovi predmemoriju
       };
  
       export function useInvalidateData() {
         return useContext(DataVersionContext).invalidate;
       }
  
       export default useCachedData;
  
       // Primjer upotrebe:
       function ComponentUsingData() {
         const data = useCachedData();
         return 
  {data?.data}
  ;
       }
  
       function ComponentThatInvalidates() {
          const invalidate = useInvalidateData();
          return Invalidate Cache
       }
  
       // Omotajte svoju aplikaciju s DataVersionProvider
       // 
       //   
       //   
       // 
       
       

• Istek temeljen na vremenu: Implementirajte mehanizam isteka predmemorije koji automatski invalidira predmemoriju nakon određenog vremenskog razdoblja. To može biti korisno za podatke koji su relativno statični, ali se povremeno mogu mijenjati.
• Invalidacija temeljena na oznakama (tagovima): Povežite oznake s keširanim podacima i invalidirajte predmemoriju na temelju tih oznaka. To može biti korisno za invalidaciju povezanih podataka kada se određeni podatak promijeni.
• WebSockets i ažuriranja u stvarnom vremenu: Ako vaša aplikacija koristi WebSockets ili druge mehanizme za ažuriranje u stvarnom vremenu, možete koristiti ta ažuriranja za pokretanje invalidacije predmemorije. Kada se primi ažuriranje u stvarnom vremenu, invalidirajte predmemoriju za pogođene podatke.

Najbolje prakse za korištenje experimental_useCache

Kako biste učinkovito iskoristili experimental_useCache i izbjegli potencijalne zamke, slijedite ove najbolje prakse:

• Koristite ga za skupe operacije: Koristite experimental_useCache samo za operacije koje su zaista skupe, poput dohvaćanja podataka ili složenih izračuna. Keširanje jeftinih operacija zapravo može smanjiti performanse zbog dodatnog opterećenja upravljanja predmemorijom.
• Definirajte jasne ključeve predmemorije: Osigurajte da argumenti proslijeđeni keširanoj funkciji jedinstveno identificiraju podatke koji se keširaju. To je ključno za osiguravanje ispravnog rada predmemorije i da se podaci nehotice ne ponovno koriste. Za argumente koji su objekti, razmislite o njihovoj serijalizaciji i heširanju kako biste stvorili dosljedan ključ.
• Implementirajte strategije invalidacije predmemorije: Kao što je ranije spomenuto, morat ćete implementirati vlastite strategije za invalidaciju predmemorije kada se temeljni podaci promijene. Odaberite strategiju koja je prikladna za vašu aplikaciju i podatke.
• Pratite performanse predmemorije: Pratite performanse svoje predmemorije kako biste osigurali da radi kako se očekuje. Koristite alate za bilježenje i otklanjanje pogrešaka za praćenje pogodaka (hits) i promašaja (misses) predmemorije te za identifikaciju potencijalnih uskih grla.
• Razmotrite alternative: Prije korištenja experimental_useCache, razmislite jesu li druga rješenja za keširanje prikladnija za vaše potrebe. Na primjer, ako trebate robusnije rješenje za keširanje s ugrađenim značajkama poput invalidacije i izbacivanja predmemorije, mogli biste razmisliti o korištenju namjenske biblioteke za keširanje. Biblioteke poput `react-query`, `SWR`, pa čak i korištenje `localStorage` ponekad mogu biti prikladnije.
• Počnite s malim: Uvodite experimental_useCache postupno u svoju aplikaciju. Počnite keširanjem nekoliko ključnih operacija dohvaćanja podataka i postupno proširujte njegovu upotrebu kako stječete više iskustva.
• Dokumentirajte svoju strategiju keširanja: Jasno dokumentirajte svoju strategiju keširanja, uključujući koji se podaci keširaju, kako se predmemorija invalidira i sva potencijalna ograničenja. To će olakšati drugim programerima razumijevanje i održavanje vašeg koda.
• Testirajte temeljito: Temeljito testirajte svoju implementaciju keširanja kako biste osigurali da radi ispravno i da ne uvodi neočekivane bugove. Napišite jedinične testove kako biste provjerili da se predmemorija popunjava i invalidira kako se očekuje.

Alternative za experimental_useCache

Iako experimental_useCache pruža praktičan način za upravljanje keširanjem unutar Reacta, to nije jedina dostupna opcija. Nekoliko drugih rješenja za keširanje može se koristiti u React aplikacijama, svako sa svojim prednostima i nedostacima.

• useMemo: Hook useMemo može se koristiti za memoizaciju rezultata skupih izračuna. Iako ne pruža pravo keširanje između renderiranja, može biti koristan za optimizaciju performansi unutar jedne komponente. Manje je prikladan za dohvaćanje podataka ili scenarije gdje se podaci trebaju dijeliti među komponentama.
• React.memo: React.memo je komponenta višeg reda (higher-order component) koja se može koristiti za memoizaciju funkcijskih komponenti. Sprječava ponovno renderiranje komponente ako se njezini props nisu promijenili. To može poboljšati performanse u nekim slučajevima, ali ne pruža keširanje podataka.
• Vanjske biblioteke za keširanje (react-query, SWR): Biblioteke poput react-query i SWR pružaju sveobuhvatna rješenja za dohvaćanje podataka i keširanje za React aplikacije. Ove biblioteke nude značajke poput automatske invalidacije predmemorije, dohvaćanja podataka u pozadini i optimističnih ažuriranja. Mogu biti dobar izbor ako trebate robusnije rješenje za keširanje s naprednim značajkama.
• Local Storage / Session Storage: Za jednostavnije slučajeve upotrebe ili postojanost podataka između sesija, mogu se koristiti `localStorage` ili `sessionStorage`. Međutim, potrebno je ručno upravljati serijalizacijom, invalidacijom i ograničenjima pohrane.
• Prilagođena rješenja za keširanje: Možete također izgraditi vlastita prilagođena rješenja za keširanje koristeći Reactov context API ili druge tehnike upravljanja stanjem. To vam daje potpunu kontrolu nad implementacijom keširanja, ali također zahtijeva više truda i stručnosti.

Zaključak

Reactov experimental_useCache hook nudi moćan i praktičan način za upravljanje keširanjem unutar React aplikacija. Keširanjem rezultata skupih operacija, možete značajno poboljšati performanse, smanjiti mrežne zahtjeve i pojednostaviti logiku dohvaćanja podataka. Kada se koristi u kombinaciji sa Suspenseom i React Server Components, experimental_useCache može dodatno poboljšati korisničko iskustvo i optimizirati performanse renderiranja na poslužitelju.

Međutim, važno je biti svjestan ograničenja i potencijalnih nedostataka experimental_useCache, kao što je nedostatak ugrađene invalidacije predmemorije i potencijal za povećanu potrošnju memorije. Slijedeći najbolje prakse navedene u ovom vodiču i pažljivo razmatrajući specifične potrebe vaše aplikacije, možete učinkovito iskoristiti experimental_useCache kako biste otključali značajna poboljšanja performansi i pružili bolje korisničko iskustvo.

Ne zaboravite ostati informirani o najnovijim ažuriranjima Reactovih eksperimentalnih API-ja i budite spremni prilagoditi svoj kod po potrebi. Kako se React nastavlja razvijati, tehnike keširanja poput experimental_useCache igrat će sve važniju ulogu u izgradnji skalabilnih web aplikacija visokih performansi.