React 19: Yeni Özellikler ve Detaylı İnceleme
React 19, birçok yenilik ve iyileştirme ile birlikte geldi. Bu yazıda, React 19’un sunduğu yeni özellikler ve geliştirmeleri detaylı bir şekilde inceleyecek ve kod örnekleri ile açıklayacağız.
1. Server Components ve Server Actions
React 19, Server Components özelliği ile birlikte geliyor. Bu özellik, bileşenlerin sunucu tarafında işlenmesine ve kullanıcıya daha hızlı bir şekilde sunulmasına olanak tanır. Ayrıca, Server Actions ile istemci bileşenlerinden sunucu üzerinde asenkron fonksiyonlar çağırmak mümkün hale geliyor. Bu, uygulamaların performansını ve SEO optimizasyonunu artırır.
Örnek Kullanım:
"use server"
export async function getData() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
return res.json();
}
2. Yeni use API’si
Yeni use API’si, React 19’un en dikkat çekici yeniliklerinden biri. Bu API, hooks’a benzer şekilde çalışır ancak koşullu olarak çağrılabilir. Bu, kaynakların render sırasında daha esnek bir şekilde tüketilmesine olanak tanır.
Örnek Kullanım:
const theme = use(ThemeContext);
return (
<h1 style={{color: theme.color}}>
{children}
</h1>
);
3. Geliştirilmiş Ref Yönetimi
React 19, ref yönetiminde önemli değişiklikler yaptı. Artık ref’i bir prop olarak fonksiyon bileşenlerine geçirebilirsiniz. Bu, forwardRef ihtiyacını ortadan kaldırır ve bileşenlerinizi daha basit hale getirir.
Örnek Kullanım:
function MyInput({placeholder, ref}) {
return <input placeholder={placeholder} ref={ref} />;
}
// Kullanım:
<MyInput ref={ref} />
4. Document Metadata
React 19 ile birlikte, sayfa başlıkları ve meta etiketleri gibi doküman meta verilerini yönetmek daha kolay hale geldi. Yeni <DocumentHead> bileşeni, SEO ve erişilebilirlik açısından önemli olan bu etiketlerin yönetimini basitleştirir.
Örnek Kullanım:
const HomePage = () => {
return (
<>
<title>My Page Title</title>
<meta name="description" content="Page description" />
// Page content
</>
);
};
5. Asset Loading
React 19, varlıkların yüklenmesini iyileştiren yeni mekanizmalar sunar. Görseller ve diğer dosyalar, kullanıcı sayfada gezinirken arka planda yüklenir, bu da sayfa geçişlerini daha hızlı ve sorunsuz hale getirir.
Örnek Kullanım:
import { useEffect } from 'react';
const MyComponent = () => {
useEffect(() => {
const img = new Image();
img.src = 'path/to/your/image.jpg';
img.onload = () => console.log('Image loaded');
}, []);
return <div>Content of your component</div>;
};
6. Yeni Hooks ve Geliştirmeler
Yeni use hook’u, mevcut useMemo, useEffect ve useContext hook’larına ek olarak, asenkron fonksiyonların ve durum yönetiminin daha kolay yapılmasını sağlar. Ayrıca, useFormStatus ve useOptimistic gibi yeni hook’lar da tanıtıldı.
useFormStatus Örnek Kullanım:
function FormComponent() {
const [formStatus, setFormStatus] = useFormStatus();
return (
<form>
{/* Form content */}
{formStatus.isSubmitting && <p>Submitting...</p>}
{formStatus.error && <p>Error: {formStatus.error}</p>}
</form>
);
}
7. Concurrent Rendering
Concurrent Rendering, React 19’da tanıtılan bir başka önemli özellik. Bu özellik, uygulamaların daha hızlı ve daha duyarlı olmasını sağlar.
Örnek Kullanım:
import { Suspense } from 'react';
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
);
}
Geçiş Süreci
React 19’a geçiş yapmak için adım adım bir plan izlemek önemlidir. İlk olarak, uygulamanızın mevcut durumunu gözden geçirip, eski API’leri veya sınıf bileşenlerini güncelleyebilirsiniz. Daha sonra, kodunuzun büyük bölümlerini otomatik olarak güncelleyebilecek codemod araçlarını kullanabilirsiniz. Ayrıca, geçiş sırasında Strict Mode’u kullanarak eski özellikleri tespit edip güncelleyebilirsiniz.
React 19, geliştiricilere daha hızlı, daha esnek ve daha performanslı uygulamalar geliştirme imkanı sunar. Yeni özellikler ve iyileştirmelerle, React topluluğu için heyecan verici bir güncelleme olarak öne çıkıyor. Detaylı bilgi ve dokümantasyon için React resmi web sitesini ziyaret edebilirsiniz.
