React 19 Performansına Derinlemesine Bir Bakış

Giriş: React 19 - Varsayılan Olarak Performans

Yıllarca React uygulamalarını optimize etmek, useMemo, useCallback gibi hook'ların ve React.memo gibi HOC'lerin disiplinli bir şekilde kullanılması anlamına geliyordu. Bu araçlar güçlü olsalar da, zihinsel yük ve kod tekrarı ekleyerek performans optimizasyonunu manuel bir angaryaya dönüştürüyordu. React 19, oyunu tamamen değiştiriyor. Yeni React Derleyicisi'nin (React Compiler) tanıtılmasıyla birlikte, performans artık sonradan düşünülen bir şey değil, varsayılan bir özellik haline geliyor. Bu yazı, otomatik memoizasyondan daha akıllı veri çekme ve varlık yükleme yöntemlerine kadar React 19'daki devrim niteliğindeki performans iyileştirmelerini inceliyor.

React 19'un felsefesi basit: Anlaşılır, sezgisel kod yazın ve optimizasyonu derleyiciye bırakın. Bu, daha ergonomik ve güçlü bir geliştirici deneyimine doğru önemli bir değişimi işaret ediyor.

1. Ezber Bozan Gelişme: React Derleyicisi ve Otomatik Memoizasyon

React 19'daki en önemli performans güncellemesi, React Derleyicisi'dir (önceki kod adı 'React Forget'). Bu, öğrenilecek yeni bir API değil, React'in kurallarını anlayan ve bileşenleri ve hook'ları memoize ederek kodunuzu otomatik olarak daha performanslı olacak şekilde yeniden yazan bir optimize edici derleyicidir.

Eski Yöntem (React 18 ve öncesi)

Daha önce, bir üst bileşenin state'i değiştiğinde alt bileşenin yeniden render olmasını önlemek için onu manuel olarak React.memo ile sarmalamanız ve fonksiyon prop'larının useCallback ile sarmalandığından emin olmanız gerekiyordu.

// React 18: Manuel memoizasyon gerekli
import React, { useState, useCallback } from 'react';

const ExpensiveButton = React.memo(({ onClick }) => {
  console.log('ExpensiveButton render ediliyor...');
  return <button onClick={onClick}>Bana Tıkla</button>;
});

function App() {
  const [count, setCount] = useState(0);

  // Her render'da yeni bir fonksiyon oluşmasını engellemek için useCallback gerekli
  const handleClick = useCallback(() => {
    console.log('Butona tıklandı!');
  }, []);

  return (
    <div>
      <h1>Sayı: {count}</h1>
      <button onClick={() => setCount(c => c + 1)}>Arttır</button>
      <ExpensiveButton onClick={handleClick} />
    </div>
  );
}

Yeni Yöntem (React 19)

React Derleyicisi ile sadece kodunuzu yazarsınız. Derleyici, JSX'i analiz eder ve gerektiğinde otomatik olarak memoizasyon uygular, bu da çoğu durumda React.memo, useMemo ve useCallback ihtiyacını ortadan kaldırır.

// React 19: Derleyici her şeyi otomatik olarak hallediyor!
import React, { useState } from 'react';

// React.memo'ya gerek yok!
function ExpensiveButton({ onClick }) {
  console.log('ExpensiveButton render ediliyor...'); // Bu sadece props'lar gerçekten değiştiğinde loglanır
  return <button onClick={onClick}>Bana Tıkla</button>;
}

function App() {
  const [count, setCount] = useState(0);

  // useCallback'e gerek yok!
  const handleClick = () => {
    console.log('Butona tıklandı!');
  };

  return (
    <div>
      <h1>Sayı: {count}</h1>
      <button onClick={() => setCount(c => c + 1)}>Arttır</button>
      <ExpensiveButton onClick={handleClick} />
    </div>
  );
}

2. Suspense ile Gelişmiş Sunucu Taraflı Render (SSR)

React 19, özellikle streaming (akış) ile SSR yeteneklerini önemli ölçüde geliştirir. Eskiden, sunucudaki en yavaş veri çekme işlemini tüm sayfanın beklemesi gerekiyordu ve ancak ondan sonra istemciye HTML gönderilebiliyordu. Streaming SSR ve Suspense ile React, sayfanızın HTML iskeletini hemen gönderebilir ve ardından sunucuda veriler geldikçe içeriği akış halinde yollayabilir.

// React 19 ile Suspense, sunucuda sorunsuz bir şekilde çalışır.
import { Suspense } from 'react';
import { fetchProfileData } from './api'; // bunun bir API'dan veri çektiğini varsayalım

// Bu bileşen veri çeker.
async function ProfileDetails() {
  const data = await fetchProfileData();
  return <h1>{data.name}</h1>;
}

// Basit bir yüklenme iskeleti.
function ProfileSkeleton() {
  return <h1>Profil yükleniyor...</h1>;
}

function App() {
  return (
    <div>
      <h2>Harika Uygulamam</h2>
      <Suspense fallback={<ProfileSkeleton />}>
        <ProfileDetails />
      </Suspense>
    </div>
  );
}

Bu örnekte, kullanıcı anında 'Harika Uygulamam' ve 'Profil yükleniyor...' yazılarını görür. Sunucuda fetchProfileData tamamlandığında, React kullanıcının adını içeren HTML'i akışla gönderir ve iskeletin yerini alır; hem de tam sayfa yenilemesi olmadan. Bu, hissedilen performansı ve İlk Bayta Kadar Geçen Süreyi (TTFB) önemli ölçüde iyileştirir.

3. Gelişmiş Varlık Yükleme Optimizasyonu

Script, stil dosyası ve font gibi varlıkları ne zaman ve nasıl yüklediğinizi optimize etmek, hızlı bir kullanıcı deneyimi için kritik öneme sahiptir. React 19, geliştiricilere bu süreç üzerinde hassas kontrol sağlamak için yeni Kaynak Yükleme API'leri sunar.

import { preload, preinit } from 'react-dom';

function MyComponent() {
  // Yakında ihtiyaç duyulacak yüksek öncelikli bir stil dosyasını önceden yükle
  preinit('critical-styles.css', { as: 'style' });

  // Kullanıcının gidebileceği bir bileşen için bir script'i önceden yükle
  preload('heavy-chart-library.js', { as: 'script' });

  return <div>Hoş geldiniz!</div>;
}

• preload(): Tarayıcıya bir kaynağı indirmeye başlaması için verilen düşük öncelikli bir ipucudur, çünkü muhtemelen yakında (örneğin, bir sonraki sayfada) ihtiyaç duyulacaktır.

• preinit(): Tarayıcıya bir kaynağı alıp başlatması için verilen yüksek öncelikli bir talimattır, çünkü kesinlikle ihtiyaç duyulacaktır (örneğin, mevcut görünüm için kritik bir CSS dosyası).

Bu API'ler, render'ı engelleyen kaynakları ortadan kaldırmaya ve düzen kaymalarını azaltmaya yardımcı olarak çok daha akıcı bir yükleme deneyimi sağlar.

4. Büyük Veri Kümeleri için Sanallaştırma ve Lazy Loading

Bir listede binlerce öğeyi göstermek, bir performans zorluğu olmaya devam ediyor. React 19'un özellikleri, sanallaştırma ve lazy loading gibi yerleşik desenlerle harika bir uyum içinde çalışır.

Sanallaştırma (Virtualization)

Sanallaştırma (veya 'pencereleme'), yalnızca o anda ekranda görünen liste öğelerini render etme tekniğidir. TanStack Virtual (@tanstack/react-virtual) veya react-window gibi kütüphaneler bu iş için mükemmel seçeneklerdir.

İşte react-window kullanarak 10.000 öğelik bir listeyi performans sorunu yaşamadan render eden temel bir örnek:

import React from 'react';
import { FixedSizeList as List } from 'react-window';

// Satır bileşeni: Kendini konumlandırmak için style prop'unu react-window'dan alır.
const Row = ({ index, style }) => (
  <div style={style}>
    Satır {index + 1}
  </div>
);

const VirtualizedList = () => (
  <List
    height={400} // Görünen pencerenin yüksekliği
    itemCount={10000} // Listedeki toplam öğe sayısı
    itemSize={35} // Her bir öğenin yüksekliği
    width={'100%'}
  >
    {Row} // Row bileşenini listeye gönderiyoruz
  </List>
);

export default VirtualizedList;

React.lazy ve Suspense ile Birleştirme

Yalnızca belirli bir yönetici panelinde ihtiyaç duyulan büyük bir veri tablosu bileşeni hayal edin. Maksimum etki için kod bölmeyi sanallaştırma ile birleştirebiliriz. Önce, tablo bileşeninin kendisini lazy-load ile yükleriz. Ardından, yüklendikten sonra, bu bileşen kendi satırlarını verimli bir şekilde render etmek için sanallaştırma kullanır.

import React, { Suspense, lazy, useState } from 'react';

// 1. Büyük listeyi yöneten bileşenin kodunu lazy-load ile yükle.
const LargeDataGrid = lazy(() => import('./components/LargeDataGrid')); // LargeDataGrid kendi içinde sanallaştırma kullanıyor

function Dashboard() {
  // Veri tablosunun görünürlüğünü kontrol etmek için state
  const [showGrid, setShowGrid] = useState(false);

  return (
    <div>
      <h1>Kullanıcı Paneli</h1>
      {/* Diğer panel bileşenleri burada olabilir */}

      <button onClick={() => setShowGrid(true)} disabled={showGrid}>
        Tüm İşlemleri Göster
      </button>

      {showGrid && (
        <Suspense fallback={<div>Veri Tablosu Yükleniyor...</div>}>
          <h2>Tüm İşlemler</h2>
          {/* 2. Bileşen, yalnızca ihtiyaç duyulduğunda çekilir ve render edilir. */}
          <LargeDataGrid />
        </Suspense>
      )}
    </div>
  );
}

Bu iki aşamalı yaklaşım, ne bileşenin kodunun ne de devasa veri setinin başlangıçta yüklenmemesini sağlayarak ilk sayfa yüklemesinin inanılmaz derecede hızlı olmasını garanti eder.

Sonuç

React 19, performansa yaklaşımımızda bir paradigma değişimini temsil ediyor. React ekibi, optimizasyonu doğrudan derleyiciye dahil ederek ve sunucu render'ı ile varlık yükleme için API'leri geliştirerek, geliştiricilerin en önemli şeye odaklanmalarını sağladı: harika özellikler ve kullanıcı arayüzleri oluşturmak. React'in geleceği sadece daha güçlü değil, aynı zamanda varsayılan olarak daha basit ve daha hızlı.