React API Series
React use API
React son dönemlerde React Server Component ile birlikte ekstra APIler çıkarıyor. Bunlardan bir taneside use APIsi.
React son dönemlerindeki çabaların büyük bir yoğunluğu RSC yani React Server Component üzerine, Bileşenlerin fullstack çalışabilmesi için Framework, Bundler ve React API tarafında ardı ardına geliştirmeler yapılıyor.
React use() API'si, özellikle React 18 ile tanıtılan ve gelecekteki sürümlerde daha da güçlenecek olan, Promise ve Context gibi kaynaklardan veri okuma biçimini basitleştirmek için ortaya çıktı.
kullanımı aşağıdaki şekilde.
const value = use(resource);1. Asenkron Veri İşleme (Promise)
React daha önce asenkron veri (örneğin bir API çağrısı) yönetmek için genellikle useEffect, useQuery gibi Hook kullanılırdı.
Bu, veri yükleme durumlarını (loading, error, data) yönetmek için ekstra state oluşturuyor ve
use ile Promise'leri doğrudan bir component içinde await benzeri bir şekilde beklemenizi sağlar. Bu, kodun daha okunabilir ve anlaşılır olmasını sağlar. Örneğin:
function MyComponent() {
// fetchData() bir Promise döndürüyor
const data = use(fetchData());
return <div>{data}</div>;
}Bu kullanım, Suspense ile doğal entegrasyon sağlar. Veri yüklenirken Suspense fallback gösterilmesini, veri geldiğinde ise bileşenin render edilmesini otomatik olarak yönetir. Bu durum geliştiricilerin veri yükleme durumlarını manuel olarak yönetme yükünü azaltır.
React Web sayfasında anlatılan örneği inceleyelim. Client bileşen olan Message props geçirilen FetchPromise … use ile direk kullanabiliyor. Suspense de bu yükleme sırasındaki Loading, Error, Data state yönetmiş oluyor. Bu ReactQuery, Apollo GraphQL Client farklı bir yaklaşım. Sunucu ve Client daha birlikte çalıştığı sisteme uygun.
2. Context Tüketimini Basitleştirme
Daha önce Context API’sini kullanmak için useContext Hook'u vardı. Hook kuralından dolayı bileşenin en üst seviyesinde çağrılması gerekiyor. Bu durum da conditional render içinde veya döngüler içinde Context'i okumak istediğinizde bizi kısıtlıyor.
use API’si, useContext’ten daha esnek bir yapı sunar. if koşulları veya for döngüleri gibi koşullu bloklar içinde de kullanılabilir
function HorizontalRule({ show }) {
if (show) {
const theme = use(ThemeContext); // Koşul içinde use kullanımı
return <hr className={theme} />;
}
return false;
}3. Server Components ile Uyum
Yazının başında da bahsettiğim gibi React ekibinin son dönemlerde üzerinde durduğu en önemli konu React Compiler ve RSC(React Server Components). RSC kısmındaki en önemli konuda verinin sunucuda çekilmesi ve Client Components geçirilmesi. use API ile artık bu daha kolay bir şekilde gerçekleşebilecek.
Server Components’ da async ve await kullanımı tercih edilse de, use API'si Promise'lerin ve diğer kaynakların Client Components (İstemci Bileşenleri) ve Server Components arasında nasıl paylaşılacağını basitleştirmeyi sağlıyor.
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
