React'te render performansı

Render Nedir

React'te render, React'in component fonksiyonlarınızı çağırıp ekranda ne olması gerektiğini hesaplamasıdır. Her ekran güncellemesi üç adımdan geçer: bir şey render'ı tetikler (ilk açılış ya da bir state güncellemesi), React component'leri render eder, sonra farkları DOM'a commit eder. React DOM'a yalnızca iki render arasında fark varsa dokunur.¹

Yani bir component'in yeniden render olması her zaman DOM'un değişmesi demek değildir; çoğu re-render hızlıdır. Sorun genellikle render sırasında yapılan pahalı iştir. Kent C. Dodds'un deyişiyle, render'larınızın tamamı gerekli olsa bile yavaşsalar kullanıcı yine kötü bir deneyim yaşar.²

React Neden Yeniden Render Eder

Her re-render bir state değişikliğiyle başlar. State'i değişen component yeniden render olur ve React onun altındaki tüm component'leri de yeniden render eder; prop olarak o state'i alıp almamaları fark etmez.³ Bir component dört sebepten render olur: kendi state'i değişti, ebeveyni render oldu (render yukarıdan aşağı akar, çocuk render olunca ebeveyn olmaz), kullandığı context'in değeri değişti ya da içinde kullandığı bir hook'un state'i değişti.⁴

Ölçmeden Optimize Etmeyin

React DevTools Profiler

React Developer Tools eklentisindeki Profiler sekmesinde kaydı başlatır, yavaş hissettiren etkileşimi yapar ve kaydı durdurursunuz. Sonuç commit'lere bölünür; her commit'in flame chart'ında sarı çubuklar uzun, mavi çubuklar kısa süren render'ları gösterir, gri olanlar o commit'te hiç render olmamıştır. Ranked chart ise component'leri render süresine göre sıralar.⁵

İki ayar özellikle işe yarar:

• Highlight updates: DevTools ayarlarındaki "Highlight updates when components render" seçeneği, render olan component'leri ekranda yanıp sönen bir çerçeveyle gösterir.³⁶ Bir input'a yazarken bütün sayfa yanıp sönüyorsa state'in fazla yukarıda olduğunu hemen görürsünüz.

• Render nedeni: Profiler ayarlarındaki "Record why each component rendered while profiling" seçeneği, bir component'in hangi prop ya da state yüzünden render olduğunu kaydeder.³

Performance Tracks

React 19.2 ile birlikte React, tarayıcının Performance paneline kendi izlerini ekler.⁸ Ölçüm dersinde gördüğünüz Performance panelinde kayıt aldığınızda Scheduler izi işin hangi öncelikte yapıldığını (kullanıcı etkileşimi için Blocking, startTransition için Transition) ve işin baştan yapılmasına yol açan cascading update'leri gösterir. Components izi ise render sürelerini flamegraph olarak verir; development build'de bir render'a tıklayınca değişen prop'ları görürsünüz. İzler development build'de açık, ek yük getirdiği için production build'de kapalıdır.⁹

React Compiler

React Compiler, kodunuzu build sırasında analiz edip memoization'ı otomatik ekleyen bir araçtır. İlk kararlı sürümü v1.0, Ekim 2025'te yayımlandı.¹⁰ Elle yazdığınız memo, useMemo ve useCallback'in yaptığını, Rules of React'e uyan kodda kendisi yapar; kodu yeniden yazmanız gerekmez.¹¹

Next.js 16'da reactCompiler seçeneği kararlıdır; paketi kurup config'te açarsınız:¹²

$ pnpm add -D babel-plugin-react-compiler

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = { reactCompiler: true };
export default nextConfig;

Vite ve Expo için de resmi kurulum yolları vardır; Expo SDK 54 ve sonrasında compiler varsayılan olarak açıktır.¹⁰ Bir component'i compiler dışında bırakmak için fonksiyonun başına "use no memo" yazılır.¹²

memo, useMemo ve useCallback Ne Zaman

Compiler kullanmıyorsanız ya da kaçış kapısına ihtiyacınız varsa üç araç vardır:

memo bir garanti değil, performans optimizasyonudur. Render'da fark edilir bir gecikme yoksa gereksizdir.¹³ Bir hesaplamanın pahalı olup olmadığını console.time ile ölçebilirsiniz: toplamda 1ms ve üstü sürüyorsa memoize etmeye değer.⁷

memo'lu bir component'e her render'da yeniden oluşan bir obje ya da fonksiyon geçerseniz memo hiçbir işe yaramaz; bu yüzden useMemo ve useCallback çoğu zaman memo ile birlikte kullanılır.¹³ Memoization bu nedenle kırılgandır: başka biri component'e satır içi bir obje ya da JSX children geçtiği an etkisi sessizce kaybolur.¹⁴

State'i Aşağı Taşımak ve children

memo'ya uzanmadan önce component yapısını değiştirmek çoğu zaman yeterlidir.¹⁵¹³

State'i aşağı taşıyın: State'i onu gerçekten kullanan en küçük component'e koyun. Böylece state değişince yalnızca o component render olur, yanındaki pahalı ağaç etkilenmez. Örneğin bir input'un state'ini sayfanın kökünden, input'u içeren küçük bir Form component'ine taşırsanız yazarken <ExpensiveTree /> render olmaz.¹⁵

İçeriği children olarak verin: State'in pahalı ağacın üstünde durması gerekiyorsa, state'li kısmı children alan bir sarmalayıcıya taşıyın. children ebeveynde oluşturulduğu için sarmalayıcının state'i değişince React onları yeniden render etmez.¹⁵¹³

function ColorPicker({ children }: { children: React.ReactNode }) {
  const [color, setColor] = useState("red");
  return (
    <div style={{ color }}>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      {children}
    </div>
  );
}

<ColorPicker>
  <ExpensiveTree />
</ColorPicker>;

Aynı listede iki kural daha vardır: input ya da hover gibi geçici state'i global store'a veya ağacın tepesine koymayın, render'ı saf tutun. React'e göre performans sorunlarının çoğu, state güncelleyen Effect zincirlerinden çıkar.¹³

Uzun Listelerde Virtualization

Binlerce satırlık bir listede sorun her satırın kendisi değil, DOM'un büyüklüğüdür: DOM büyüdükçe tarayıcının render işi de büyür ve hem ilk yükleme hem etkileşimler yavaşlar.¹⁶ Virtualization, yalnızca ekranda görünen satırları DOM'a koyup kaydırdıkça değiştirme tekniğidir.

React'te yaygın seçenek TanStack Virtual'dır. Görünüm üretmez (headless), yalnızca hangi satırın nerede duracağını hesaplar; liste, grid ve yatay kaydırmayı destekler.¹⁷¹⁸ Kurulum tek paketle yapılır:¹⁹

$ pnpm add @tanstack/react-virtual

import { useRef } from "react";
import { useVirtualizer } from "@tanstack/react-virtual";

function LongList({ items }: { items: string[] }) {
  const parentRef = useRef<HTMLDivElement>(null);
  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 40,
  });

  return (
    <div ref={parentRef} style={{ height: 400, overflow: "auto" }}>
      <div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
        {virtualizer.getVirtualItems().map((row) => (
          <div key={row.key} style={{ position: "absolute", width: "100%", transform: `translateY(${row.start}px)` }}>
            {items[row.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

count toplam satır sayısı, getScrollElement kaydırılan kutu, estimateSize bir satırın tahmini yüksekliğidir.¹⁷ Sayfanın kendisi kayıyorsa useWindowVirtualizer kullanılır.¹⁷

useTransition ve useDeferredValue ile INP

Interaction to Next Paint (INP), bir tıklama ya da tuşa basmadan sonra ekranın ne kadar sürede güncellendiğini ölçer. Gecikme üç parçadan oluşur: main thread'in meşgul olması yüzünden bekleme, event handler'ların çalışması ve yeni karenin çizilmesi.¹⁶ 2025'te sitelerin mobilde %77'si, masaüstünde %97'si iyi INP aldı.²⁰

Büyük bir render, main thread'i bloklayıp yazmayı ve tıklamayı geciktirir. React'in concurrent özellikleri acil olmayan render'ı duraklatıp tarayıcıya yol verebilir, böylece yazmak akıcı kalır.²¹

useTransition

startTransition içindeki state güncellemeleri transition olarak işaretlenir. Transition'lar bloklamaz ve kesilebilir: kullanıcı başka bir şeye tıklarsa React önce onu işler. isPending ile bekleme durumunu gösterebilirsiniz.²²

const [isPending, startTransition] = useTransition();

function selectTab(next: Tab) {
  startTransition(() => setTab(next));
}

useDeferredValue

Bir değerin "geride kalan" kopyasını verir: React önce eski değerle hızlıca render eder, yeni değerle render'ı arka planda dener.²³

const [text, setText] = useState("");
const deferredText = useDeferredValue(text);

<input value={text} onChange={(e) => setText(e.target.value)} />
<SlowList text={deferredText} /> {/* SlowList memo ile sarılı */}

Bu, SlowList'i hızlandırmaz; yalnızca tuşlara basmayı bloklamamasını sağlar. SlowList memo ile sarılmalıdır, yoksa her tuşta yine render olur ve kazanç kaybolur. Debounce'tan farkı sabit bir gecikme seçmemeniz ve işin kesilebilmesidir.²³

Bu iki API tek bir component'in kendisi pahalıysa yardımcı olmaz ve ek CPU işi getirir; önce render'ı hızlandırmaya bakın.²¹

Detaylı Öğrenmek İçin

• Konuşma: Nadia Makarevich'in re-render nedenlerini ve composition tekniklerini anlattığı 23 dakikalık konuşması (React Summit 2022).²⁴

• Konuşma: Ivan Akulov'un yavaş bir filtre örneği üzerinden startTransition'ı anlattığı 23 dakikalık konuşması (React Summit 2023).²¹

• Konuşma: Ruslan Lesiutin'in Performance Tracks ile profil çıkarmayı gösterdiği yaklaşık 21 dakikalık oturum (React Conf 2025, 1. gün yayını).²⁵

• Yazı: Nadia Makarevich'in re-render rehberi; nedenleri, kalıpları ve anti-pattern'leri tek sayfada toplar.⁴

• Resmi doküman: React Compiler'ın kurulum, kademeli geçiş ve sorun giderme sayfaları.¹¹