React 18 Concurrent Features: Performansın Geleceği

React 18, web geliştirme dünyasında devrim niteliğinde değişiklikler getirdi. Concurrent rendering, automatic batching ve Suspense gibi yeni özellikler ile uygulamalarınızın performansını nasıl artırabileceğinizi keşfedin.

Concurrent Rendering Nedir?

React 18'in en büyük yeniliği olan Concurrent Rendering, React'in aynı anda birden fazla UI güncellemesini hazırlayabilmesini sağlar. Bu özellik sayesinde React, yüksek öncelikli güncellemeleri (kullanıcı etkileşimleri gibi) düşük öncelikli güncellemelerden (arka plan veri yüklemeleri gibi) önce işleyebilir.

Temel Avantajları

• Kesintisiz Kullanıcı Deneyimi: Kullanıcı etkileşimleri hiçbir zaman bloke olmaz
• Akıllı Önceliklendirme: React, hangi güncellemelerin daha önemli olduğunu bilir
• Daha İyi Performans: CPU kaynaklarının daha verimli kullanımı
• Gelişmiş Debugging: React DevTools ile daha iyi izleme imkanı

Automatic Batching

React 18 öncesinde, sadece React event handler'ları içindeki state güncellemeleri batch ediliyordu. React 18 ile birlikte, setTimeout, Promise'ler ve native event handler'ları içindeki güncellemeler de otomatik olarak batch ediliyor.

// React 17'de - 3 ayrı render
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  setData(d => [...d, newItem]);
}, 1000);

// React 18'de - 1 batch render
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  setData(d => [...d, newItem]);
}, 1000);

Suspense ile Veri Yükleme

React 18'de Suspense artık sadece code splitting için değil, veri yükleme işlemleri için de kullanılabiliyor. Bu özellik sayesinde loading state'lerini daha elegant bir şekilde yönetebilirsiniz.

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <UserProfile />
      <Posts />
    </Suspense>
  );
}

function UserProfile() {
  const user = useSuspenseQuery(getUserQuery);
  return <div>{user.name}</div>;
}

startTransition API

startTransition API, React'e hangi güncellemelerin "acil olmadığını" söylemenizi sağlar. Bu güncellemeler, daha önemli güncellemeler tarafından kesintiye uğrayabilir.

import { startTransition } from 'react';

function SearchBox() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleChange = (e) => {
    // Acil güncelleme - kullanıcı input'u
    setQuery(e.target.value);
    
    // Acil olmayan güncelleme - arama sonuçları
    startTransition(() => {
      setResults(searchData(e.target.value));
    });
  };

  return (
    &