React 18'in Yeni Özellikleri ve Concurrent Rendering

Concurrent Rendering Nedir?

Concurrent Rendering, React'ın aynı anda birden fazla görevi yönetebilmesi ve öncelikli görevlere odaklanabilmesi anlamına gelir. Bu özellik sayesinde:

• Kullanıcı etkileşimleri kesintiye uğramaz
• Büyük güncellemeler arka planda işlenir
• Uygulama daha responsive hale gelir
• Performans optimizasyonu otomatik olarak yapılır

Concurrent Rendering Nasıl Çalışır?

React 18'de Concurrent Rendering aktif etmek için createRoot API'sini kullanmanız gerekiyor:

import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

Automatic Batching

React 18'den önce, React sadece React event handler'ları içindeki state güncellemelerini batch'lerdi. Artık tüm state güncellemeleri otomatik olarak batch'leniyor:

// React 18'de artık bu da batch'leniyor
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React sadece bir kez re-render yapacak
}, 1000);

Yeni Hooks

useId

Server-side rendering uyumlu benzersiz ID'ler oluşturmak için:

function NameFields() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id + '-firstName'}>First Name</label>
      <input id={id + '-firstName'} type="text" />
      <label htmlFor={id + '-lastName'}>Last Name</label>
      <input id={id + '-lastName'} type="text" />
    </div>
  );
}

useTransition

State güncellemelerini non-urgent olarak işaretlemek için:

import { useTransition, useState } from 'react';

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
}

useDeferredValue

Değerleri ertelemek ve performansı optimize etmek için:

import { useDeferredValue, useState } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  
  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <SearchResults query={deferredQuery} />
    </div>
  );
}

Suspense Geliştirmeleri

React 18'de Suspense artık server-side rendering destekliyor ve daha güçlü hale geldi:

import { Suspense } from 'react';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<Loading />}>
        <Comments />
      </Suspense>
    </div>
  );
}

Strict Mode Değişiklikleri

React 18'de Strict Mode daha katı hale geldi ve geliştiricilerin kod kalitesini artırmasına yardımcı oluyor:

• Componentler iki kez mount ediliyor
• Effects iki kez çalıştırılıyor
• Reusable state için hazırlık yapılıyor

Migration Rehberi

1. React ve React DOM Güncelleme

npm install react@18 react-dom@18

2. createRoot API'sine Geçiş

// Eski yöntem
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// Yeni yöntem
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

3. TypeScript Tipleri Güncelleme

npm install @types/react@18 @types/react-dom@18

Performans İpuçları

• useTransition kullanın: Ağır hesaplamalar için non-urgent updates
• useDeferredValue ile optimize edin: Arama ve filtreleme için
• Suspense boundaries ekleyin: Loading durumları için
• React DevTools kullanın: Profiler ile performansı analiz edin

Sonuç

React 18, modern web uygulamaları için güçlü yeni özellikler sunuyor. Concurrent Rendering ve yeni Hooks'lar ile uygulamalarınızın performansını önemli ölçüde artırabilirsiniz. Migration süreci de oldukça basit ve geriye dönük uyumlu.

Web Studio TR'de sunduğumuz Frontend Geliştirme kurslarında React 18'in tüm özelliklerini detaylı şekilde öğrenebilir, gerçek projelerle deneyim kazanabilirsiniz.