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

// Bir API çağrısını simüle edin (gerçek API uç noktanızla değiştirin)
const fetchUserData = async (userId) => {
  console.log(`Kullanıcı kimliği için kullanıcı verileri getiriliyor: ${userId}`);
  await new Promise(resolve => setTimeout(resolve, 1000)); // Ağ gecikmesini simüle edin
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Kullanıcı verileri getirilemedi: ${response.status}`);
  }
  return response.json();
};

// fetchUserData fonksiyonunun önbelleğe alınmış bir sürümünü oluşturun
const getCachedUserData = experimental_useCache(fetchUserData);

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

  return (
    

      
Kullanıcı Profili
      
Ad: {userData.name}
      
E-posta: {userData.email}
    
  );
}

function App() {
  return (
    Kullanıcı verileri yükleniyor...

Açıklama:

1. experimental_useCache İçe Aktar: Gerekli hook'u React'ten içe aktarıyoruz.
2. fetchUserData Tanımla: Bu fonksiyon, bir API'den kullanıcı verilerini getirmeyi simüle eder. Sahte API çağrısını gerçek veri getirme mantığınızla değiştirin. await new Promise ağ gecikmesini simüle ederek önbelleklemenin etkisini daha belirgin hale getirir. Üretim için hazırlık için hata işleme dahildir.
3. getCachedUserData Oluştur: fetchUserData fonksiyonunun önbelleğe alınmış bir sürümünü oluşturmak için experimental_useCache kullanıyoruz. Bu, bileşenimizde aslında kullanacağımız fonksiyondur.
4. getCachedUserData'yı UserProfile'da Kullan: UserProfile bileşeni, kullanıcı verilerini almak için getCachedUserData'yı çağırır. experimental_useCache kullandığımız için, veriler zaten mevcutsa önbellekten getirilecektir.
5. Suspense ile Sar: UserProfile bileşeni, veriler getirilirken yükleme durumunu işlemek için Suspense ile sarılmıştır. Bu, verilerin yüklenmesi biraz zaman alsa bile sorunsuz bir kullanıcı deneyimi sağlar.
6. Çoklu çağrılar: App bileşeni, aynı userId'ye (1) sahip iki UserProfile bileşeni oluşturur. İkinci UserProfile bileşeni, ikinci bir API çağrısını önleyerek önbelleğe alınmış verileri kullanacaktır. Ayrıca, önbelleğe alınmamış verileri getirmeyi göstermek için farklı bir kimliğe sahip başka bir kullanıcı profili içerir.

Bu örnekte, ilk UserProfile bileşeni kullanıcı verilerini API'den getirecektir. Ancak, ikinci UserProfile bileşeni, ikinci bir API çağrısını önleyerek önbelleğe alınmış verileri kullanacaktır. Bu, özellikle API çağrısı pahalıysa veya verilere birçok bileşen tarafından erişiliyorsa performansı önemli ölçüde artırabilir.

Suspense ile Entegrasyon

experimental_useCache, React'in Suspense özelliği ile sorunsuz bir şekilde çalışacak şekilde tasarlanmıştır. Suspense, verilerin yüklenmesini bekleyen bileşenlerin yükleme durumunu bildirimsel olarak işlemenize olanak tanır. experimental_useCache'i Suspense ile birlikte kullandığınızda, React, veriler önbellekte bulunana veya veri kaynağından getirilene kadar bileşenin oluşturulmasını otomatik olarak askıya alacaktır. Bu, veriler yüklenirken bir geri dönüş kullanıcı arayüzü (örneğin, bir yükleme çarkı) görüntüleyerek daha iyi bir kullanıcı deneyimi sağlamanıza olanak tanır.

Yukarıdaki örnekte, Suspense bileşeni UserProfile bileşenini sarar ve bir fallback özelliği sağlar. Kullanıcı verileri getirilirken bu geri dönüş kullanıcı arayüzü görüntülenecektir. Veriler kullanılabilir olduğunda, UserProfile bileşeni getirilen verilerle oluşturulacaktır.

React Sunucu Bileşenleri (RSCs) ve experimental_useCache

experimental_useCache, React Sunucu Bileşenleri ile kullanıldığında parlar. RSC'lerde, veri getirme sunucuda gerçekleşir ve sonuçlar istemciye aktarılır. experimental_useCache, aynı verilere birden çok bileşenin ihtiyacı olsa bile, verilerin istek başına yalnızca bir kez getirilmesini sağlayarak sunucu tarafı veri getirmeyi önemli ölçüde optimize edebilir.

Kullanıcı verilerini getirmesi ve kullanıcı arayüzünün birden çok bölümünde görüntülemesi gereken bir sunucu bileşenine sahip olduğunuz bir senaryoyu düşünün. experimental_useCache olmadan, kullanıcı verilerini birden çok kez getirmek zorunda kalabilirsiniz, bu da verimsiz olabilir. experimental_useCache ile, kullanıcı verilerinin yalnızca bir kez getirildiğinden ve ardından aynı sunucu isteği içinde sonraki kullanımlar için önbelleğe alındığından emin olabilirsiniz.

Örnek (Kavramsal RSC Örneği):

// Sunucu Bileşeni
import { experimental_useCache } from 'react';

async function fetchUserData(userId) {
  // Bir veritabanından kullanıcı verilerini getirmeyi simüle edin
  await new Promise(resolve => setTimeout(resolve, 500)); // Veritabanı sorgu gecikmesini simüle edin
  return { id: userId, name: `Kullanıcı ${userId}`, email: `user${userId}@example.com` };
}

const getCachedUserData = experimental_useCache(fetchUserData);

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

  return (
    

      
Hoş Geldiniz, {userData.name}!
      
      
    
  );
}

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

      
Kullanıcı Bilgileri
      
E-posta: {userData.email}
    
  );
}

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

      
Son Etkinlik
      
{userData.name} ana sayfayı görüntüledi.
    
  );
}

Bu basitleştirilmiş örnekte, UserDashboard, UserInfo ve UserActivity'nin tümü Sunucu Bileşenleridir. Hepsinin kullanıcı verilerine erişmesi gerekiyor. experimental_useCache kullanmak, fetchUserData fonksiyonunun birden çok bileşende kullanılıyor olmasına rağmen, sunucu isteği başına yalnızca bir kez çağrılmasını sağlar.

Dikkat Edilmesi Gerekenler ve Potansiyel Dezavantajlar

experimental_useCache önemli faydalar sunarken, sınırlamalarının ve potansiyel dezavantajlarının farkında olmak önemlidir:

• Deneysel Durum: Deneysel bir API olarak, experimental_useCache gelecekteki React sürümlerinde değişebilir veya kaldırılabilir. Üretim ortamlarında dikkatli kullanın ve gerekirse kodunuzu uyarlamaya hazır olun. Güncellemeler için React'in resmi belgelerini ve sürüm notlarını izleyin.
• Önbellek Geçersiz Kılma: experimental_useCache, önbellek geçersiz kılma için yerleşik mekanizmalar sağlamaz. Temel veriler değiştiğinde önbelleği geçersiz kılmak için kendi stratejilerinizi uygulamanız gerekecektir. Bu, önbellek ömrünü yönetmek için özel hook'lar veya bağlam sağlayıcıları kullanmayı içerebilir.
• Bellek Kullanımı: Verileri önbelleğe almak bellek kullanımını artırabilir. Önbelleğe aldığınız verilerin boyutuna dikkat edin ve bellek tüketimini sınırlamak için önbellek çıkarma veya sona erme gibi teknikleri kullanmayı düşünün. Özellikle sunucu tarafı ortamlarda uygulamanızdaki bellek kullanımını izleyin.
• Argüman Serileştirme: Önbelleğe alınmış fonksiyona iletilen argümanlar serileştirilebilir olmalıdır. Bunun nedeni, experimental_useCache'in bir önbellek anahtarı oluşturmak için argümanları kullanmasıdır. Argümanlar serileştirilebilir değilse, önbellek doğru çalışmayabilir.
• Hata Ayıklama: Önbellekleme sorunlarında hata ayıklamak zor olabilir. Önbelleği incelemek ve beklendiği gibi davrandığını doğrulamak için günlük kaydı ve hata ayıklama araçlarını kullanın. Verilerin ne zaman getirildiğini ve ne zaman önbellekten alındığını izlemek için fetchUserData fonksiyonunuza özel hata ayıklama günlüğü eklemeyi düşünün.
• Küresel Durum: Önbelleğe alınmış fonksiyon içinde küresel değiştirilebilir durum kullanmaktan kaçının. Bu, beklenmedik davranışlara yol açabilir ve önbelleği gerekçelendirmeyi zorlaştırabilir. Tutarlı bir durumu korumak için fonksiyon argümanlarına ve önbelleğe alınmış sonuca güvenin.
• Karmaşık Veri Yapıları: Özellikle dairesel referanslar içeriyorlarsa, karmaşık veri yapılarını önbelleğe alırken dikkatli olun. Dairesel referanslar, serileştirme sırasında sonsuz döngülere veya yığın taşması hatalarına yol açabilir.

Önbellek Geçersiz Kılma Stratejileri

experimental_useCache geçersiz kılmayı ele almadığından, kullanabileceğiniz bazı stratejiler şunlardır:

• Manuel Geçersiz Kılma: Veri mutasyonlarını izlemek için özel bir hook veya bağlam sağlayıcısı uygulayın. Bir mutasyon meydana geldiğinde, önbelleğe alınmış fonksiyonu sıfırlayarak önbelleği geçersiz kılın. Bu, mutasyon üzerine değişen bir sürümü veya zaman damgasını depolamayı ve bunu `fetch` fonksiyonu içinde kontrol etmeyi içerir.

       
       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("Sürüm ile veri getirme:", version)
          await new Promise(resolve => setTimeout(resolve, 500));
          return { data: `Sürüm için veri ${version}` };
       }
  
       const useCachedData = () => {
         const { version } = useContext(DataVersionContext);
         return experimental_useCache(() => fetchData(version))(); // Önbelleği çağır
       };
  
       export function useInvalidateData() {
         return useContext(DataVersionContext).invalidate;
       }
  
       export default useCachedData;
  
       // Örnek Kullanım:
       function ComponentUsingData() {
         const data = useCachedData();
         return 
  {data?.data}
  ;
       }
  
       function ComponentThatInvalidates() {
          const invalidate = useInvalidateData();
          return Önbelleği Geçersiz Kıl
       }
  
       // Uygulamanızı DataVersionProvider ile sarın
       // 
       //   
       //   
       // 
       
       

• Zaman Tabanlı Sona Erme: Belirli bir süre sonra önbelleği otomatik olarak geçersiz kılan bir önbellek sona erme mekanizması uygulayın. Bu, nispeten statik olan ancak zaman zaman değişebilen veriler için yararlı olabilir.
• Etiket Tabanlı Geçersiz Kılma: Önbelleğe alınmış verilerle etiketler ilişkilendirin ve önbelleği bu etiketlere göre geçersiz kılın. Bu, belirli bir veri parçası değiştiğinde ilgili verileri geçersiz kılmak için yararlı olabilir.
• WebSocket'ler ve Gerçek Zamanlı Güncellemeler: Uygulamanız WebSocket'ler veya diğer gerçek zamanlı güncelleme mekanizmalarını kullanıyorsa, bu güncellemeleri önbellek geçersiz kılmayı tetiklemek için kullanabilirsiniz. Gerçek zamanlı bir güncelleme alındığında, etkilenen veriler için önbelleği geçersiz kılın.

experimental_useCache Kullanımı İçin En İyi Uygulamalar

experimental_useCache'i etkin bir şekilde kullanmak ve olası tuzaklardan kaçınmak için aşağıdaki en iyi uygulamaları izleyin:

• Pahalı İşlemler İçin Kullanın: experimental_useCache'i yalnızca veri getirme veya karmaşık hesaplamalar gibi gerçekten pahalı işlemler için kullanın. Ucuz işlemleri önbelleğe almak, önbellek yönetimi ek yükü nedeniyle performansı gerçekten azaltabilir.
• Açık Önbellek Anahtarları Tanımlayın: Önbelleğe alınmış fonksiyona iletilen argümanların önbelleğe alınan verileri benzersiz bir şekilde tanımladığından emin olun. Bu, önbelleğin doğru çalıştığından ve verilerin yanlışlıkla yeniden kullanılmadığından emin olmak için çok önemlidir. Nesne argümanları için, tutarlı bir anahtar oluşturmak üzere bunları serileştirmeyi ve karma hale getirmeyi düşünün.
• Önbellek Geçersiz Kılma Stratejileri Uygulayın: Daha önce belirtildiği gibi, temel veriler değiştiğinde önbelleği geçersiz kılmak için kendi stratejilerinizi uygulamanız gerekecektir. Uygulamanız ve verileriniz için uygun olan bir strateji seçin.
• Önbellek Performansını İzleyin: Beklendiği gibi çalıştığından emin olmak için önbelleğinizin performansını izleyin. Önbellek isabetlerini ve ıskalarını izlemek ve olası darboğazları belirlemek için günlük kaydı ve hata ayıklama araçlarını kullanın.
• Alternatifleri Düşünün: experimental_useCache kullanmadan önce, diğer önbellekleme çözümlerinin ihtiyaçlarınız için daha uygun olup olmadığını düşünün. Örneğin, önbellek geçersiz kılma ve çıkarma gibi yerleşik özelliklere sahip daha sağlam bir önbellekleme çözümüne ihtiyacınız varsa, özel bir önbellekleme kitaplığı kullanmayı düşünebilirsiniz. react-query, SWR gibi kitaplıklar veya hatta localStorage kullanmak bazen daha uygun olabilir.
• Küçükten Başlayın: Uygulamanızda experimental_useCache'i aşamalı olarak tanıtın. Birkaç temel veri getirme işlemini önbelleğe alarak başlayın ve daha fazla deneyim kazandıkça kullanımını kademeli olarak genişletin.
• Önbellekleme Stratejinizi Belgeleyin: Hangi verilerin önbelleğe alındığı, önbelleğin nasıl geçersiz kılındığı ve olası sınırlamalar dahil olmak üzere önbellekleme stratejinizi açıkça belgeleyin. Bu, diğer geliştiricilerin kodunuzu anlamasını ve bakımını yapmasını kolaylaştıracaktır.
• Kapsamlı Bir Şekilde Test Edin: Doğru çalıştığından ve beklenmedik hatalar getirmediğinden emin olmak için önbellekleme uygulamanızı kapsamlı bir şekilde test edin. Önbelleğin beklendiği gibi doldurulduğunu ve geçersiz kılındığını doğrulamak için birim testleri yazın.

experimental_useCache'e Alternatifler

experimental_useCache, React içinde önbellekleme yönetimi için uygun bir yol sağlarken, mevcut tek seçenek bu değildir. React uygulamalarında her birinin kendi avantajları ve dezavantajları olan çeşitli başka önbellekleme çözümleri de kullanılabilir.

• useMemo: useMemo hook'u, pahalı hesaplamaların sonuçlarını not almak için kullanılabilir. Render'lar arasında gerçek önbellekleme sağlamasa da, tek bir bileşen içinde performansı optimize etmek için yararlı olabilir. Veri getirme veya verilerin bileşenler arasında paylaşılması gereken senaryolar için daha az uygundur.
• React.memo: React.memo, işlevsel bileşenleri not almak için kullanılabilen daha yüksek sıralı bir bileşendir. Props'ları değişmediyse bileşenin yeniden render'larını önler. Bu, bazı durumlarda performansı artırabilir, ancak veri önbelleğe alma sağlamaz.
• Harici Önbellekleme Kitaplıkları (react-query, SWR): react-query ve SWR gibi kitaplıklar, React uygulamaları için kapsamlı veri getirme ve önbellekleme çözümleri sağlar. Bu kitaplıklar, otomatik önbellek geçersiz kılma, arka plan veri getirme ve iyimser güncellemeler gibi özellikler sunar. Gelişmiş özelliklere sahip daha sağlam bir önbellekleme çözümüne ihtiyacınız varsa iyi bir seçim olabilirler.
• Yerel Depolama / Oturum Depolama: Daha basit kullanım durumları veya verileri oturumlar arasında kalıcı hale getirmek için localStorage veya sessionStorage kullanılabilir. Ancak, serileştirme, geçersiz kılma ve depolama sınırlarını manuel olarak yönetmek gerekir.
• Özel Önbellekleme Çözümleri: React'in bağlam API'sini veya diğer durum yönetimi tekniklerini kullanarak kendi özel önbellekleme çözümlerinizi de oluşturabilirsiniz. Bu, önbellekleme uygulaması üzerinde tam kontrol sağlar, ancak daha fazla çaba ve uzmanlık da gerektirir.

Sonuç

React'in experimental_useCache hook'u, React uygulamalarında önbellekleme yönetimi için güçlü ve kullanışlı bir yol sunar. Pahalı işlemlerin sonuçlarını önbelleğe alarak, performansı önemli ölçüde artırabilir, ağ isteklerini azaltabilir ve veri getirme mantığınızı basitleştirebilirsiniz. Suspense ve React Sunucu Bileşenleri ile birlikte kullanıldığında, experimental_useCache kullanıcı deneyimini daha da geliştirebilir ve sunucu renderlama performansını optimize edebilir.

Ancak, yerleşik önbellek geçersiz kılma eksikliği ve artan bellek kullanımı potansiyeli gibi experimental_useCache'in sınırlamalarının ve potansiyel dezavantajlarının farkında olmak önemlidir. Bu kılavuzda özetlenen en iyi uygulamaları izleyerek ve uygulamanızın özel ihtiyaçlarını dikkatlice göz önünde bulundurarak, önemli performans kazanımlarını elde etmek ve daha iyi bir kullanıcı deneyimi sunmak için experimental_useCache'i etkin bir şekilde kullanabilirsiniz.

React'in deneysel API'lerindeki en son güncellemelerden haberdar olmayı ve gerektiğinde kodunuzu uyarlamaya hazır olmayı unutmayın. React gelişmeye devam ederken, experimental_useCache gibi önbellekleme teknikleri, yüksek performanslı ve ölçeklenebilir web uygulamaları oluşturmada giderek daha önemli bir rol oynayacaktır.