React Performans Optimizasyonu: Hizli Uygulamalar

React Uygulamalarinda Performans Neden Onemlidir?

React, bilesen tabanli mimarisi ve sanal DOM yapisinla modern web uygulamalari icin guclu bir temel sunar. Ancak uygulama buyudukce, gereksiz yeniden render'lar, agir hesaplamalar ve optimize edilmemis veri akislari performans sorunlarina yol acabilir. Kullanici deneyimini dogrudan etkileyen bu sorunlar, sayfa terk oranlarini arttirir ve donusum oranlarini dusurur.

2026 yilinda kullanicilar 100 milisaniyenin altinda tepki suresi bekliyor. Bu rehberde, React uygulamalarinizin performansini olcmek, analiz etmek ve iyilestirmek icin kullanabileceginiz tum temel teknikleri kapsamli sekilde ele alacagiz.

React.memo ile Gereksiz Render'lari Onleme

React.memo, bir bilesenin props'lari degismedigi surece yeniden render edilmesini onleyen bir Higher-Order Component'tir. Ozellikle sik render edilen ust bilesenlerden etkilenen alt bilesenler icin idealdir.

Kullanim sekli basittir: const MemoizedBilesen = React.memo(Bilesen);. Varsayilan olarak sig (shallow) karsilastirma yapar. Eger props olarak karmasik nesneler veya diziler geciyorsaniz, ikinci parametre olarak ozel bir karsilastirma fonksiyonu verebilirsiniz: React.memo(Bilesen, (prevProps, nextProps) => prevProps.id === nextProps.id).

Ne zaman kullanmali: Sik yeniden render edilen, ayni props ile ayni ciktiyi ureten ve render maliyeti yuksek olan bilesenlerde. Ne zaman kullanmamali:Props'lari surekli degisen bilesenlerde, cunku memo'nun kendisi de bir maliyet olusturur.

useMemo: Pahali Hesaplamalari Onbellekleme

useMemohook'u, bir hesaplamanin sonucunu onbellege alir ve yalnizca bagimliliklari degistiginde yeniden hesaplar. Buyuk listeleri filtreleme, siralama veya karmasik matematiksel islemler gibi maliyetli hesaplamalar icin kullanilir.

Sozdizimi: const sonuc = useMemo(() => pahaliBirHesaplama(veri), [veri]);. Bagimllik dizisindeki degerler degismedigi surece, onceki hesaplanmis deger kullanilir. Boylece her render'da ayni islemin tekrar yapilmasi onlenir.

Buyuk dizilerin filtrelenmesi ve siralamasinda kullanin.
Her render'da yeni bir nesne referansi olusturmamak icin kullanin.
Bagimlillik dizisini dogru tanimlamazsaniz eski (stale) deger doner; dikkatli olun.
Basit hesaplamalarda kullanmayin; useMemo'nun kendisi de bir maliyet tasir.

useCallback: Fonksiyon Referanslarini Sabitlme

useCallback, bir fonksiyonun referansini onbellege alir ve yalnizca bagimliliklari degistiginde yeni bir fonksiyon olusturur. Ozellikle React.memoile sarmalanmis alt bilesenlere fonksiyon gecirirken kritiktir; aksi takdirde her render'da yeni bir fonksiyon referansi olusur ve memo etkisiz kalir.

Sozdizimi: const handleClick = useCallback(() => { setCount(c => c + 1); }, []);. Bos bagimlilk dizisi, fonksiyonun yalnizca bir kez olusturulacagi anlamina gelir.

Onemli: useCallback ve useMemo arasindaki fark, useCallback'in fonksiyonun kendisini, useMemo'nun ise fonksiyonun donus degerini onbellege almasidir. useCallback(fn, deps) aslinda useMemo(() => fn, deps) ile esdegerdir.

React.lazy ve Suspense ile Kod Bolme

Kod bolme (code splitting), uygulamanizin JavaScript paketini daha kucuk parcalara ayirarak ilk yukleme suresini azaltir. React'in lazy fonksiyonu ve Suspense bileseni bu islemi kolaylastirir.

Dinamik import ile bilesen yukleme: const AgirBilesen = React.lazy(() => import('./AgirBilesen'));. Bu bilesen yalnizca ihtiyac duyuldugunda yuklenir. Suspense bileseni ise yukleme sirasinda gosterilecek bir fallback UI tanimlamanizi saglar.

Route-based splitting: Her sayfa icin ayri paketler olusturun. Kullanici yalnizca ziyaret ettigi sayfanin kodunu indirir.
Component-based splitting: Modal, grafik, editör gibi agir bilesenleri tembel yukleyin.
Preloading: Kullanicinin bir baglantinin uzerine geldiginde ilgili bilesenin onbellege yuklenmesini tetikleyin.
Named exports: Lazy loading varsayilan olarak default export gerektirir. Named export'lar icin bir arabirim bilesen olusturun.

Liste Sanallastirma (Virtualization)

Binlerce satir iceren listelerde tum elemanlari DOM'a eklemek ciddi performans sorunlarina neden olur. Sanallastirma teknigi, yalnizca gorunum alaninda (viewport) bulunan elemanlari render ederek bu sorunu cozer.

Populer kutuphaneler arasinda react-window ve @tanstack/react-virtual on plana cikar. react-window, sabit veya degisken yukseklikte listeler ve izgara (grid) yapilari icin optimize edilmis bilesenler sunar.

FixedSizeList: Tum elemanlarin ayni yukseklikte oldugu listeler icin.
VariableSizeList: Her elemanin farkli yukseklikte olabilecegi listeler icin.
FixedSizeGrid: Iki boyutlu izgara yapilari icin.

Sanallastirma, 100'den fazla eleman iceren listelerde gozle gorulur performans iyilesmesi saglar. Ozellikle mobil cihazlarda, DOM dugum sayisinin azaltilmasi bellek tuketimini de dusurur.

React Profiler ile Performans Analizi

React DevTools icindeki Profilersekmes, uygulamanizin render performansini olcmenizi ve darbogazlari tespit etmenizi saglar. Profiler'i kullanarak her bilesenin ne siklikla render edildigini, her render'in ne kadar suredigini ve neden tetiklendigini gorebilirsiniz.

Kayit baslatma: Profiler sekmesinde mavi kayit dugmesine tiklayin.
Uygulama ile etkilesim: Performansini olcmek istediginiz islemleri gerceklestirin.
Kaydi durdurma: Kaydi durdurup sonuclari inceleyin.
Flame chart analizi: Her commit icin hangi bilesenlerin render edildigini ve surelerini gorun.
Ranked chart: En uzun suren render'lari siralayarak darbogazlari hizlica bulun.

Programatik olarak da <Profiler> bileseni kullanabilirsiniz: <Profiler id="Navigasyon" onRender={callback}>. Bu, uretim ortaminda da performans verisi toplamanizi saglar.

State Yonetimi Optimizasyonu

State yonetimindeki hatalar, gereksiz yeniden render'larin en yaygin sebebidir. Asagidaki pratikleri uygulayarak state kaynakli performans sorunlarini onleyebilirsiniz:

State'i mumkun oldugunca aska tasiyin: Yalnizca kullanan bilesen ve alt bilesenleri etkileyen state'i ust bilesenlerde tutmayin.
Buyuk state nesnelerini bolerek yonetin: Tek bir buyuk state nesnesi yerine, bagimsiz state degiskenleri kullanin.
Context API'yi dikkatli kullanin: Context degistiginde, onu tuketeb tum bilesenler yeniden render edilir. Farkli veri gruplari icin ayri Context'ler olusturun.
useReducer ile karmasik state'i yonetin: Birbirine bagli birden fazla state degiskeni varsa, useReducer daha onagrulabilir ve performansli olabilir.
Harici state kutuphanelerini degerlendirin: Zustand, Jotai gibi kutuphaneler, granular subscription destegi ile gereksiz render'lari onler.

Gorsel ve Kaynak Optimizasyonu

Gorseller, web sayfalarinin en agir bilesenlerinden biridir. React uygulamalarinda gorsel optimizasyonu icin sunlari uygulayin:

Lazy loading: Gorunum alanina girene kadar gorselleri yuklemeyin. loading="lazy" ozelligini veya Intersection Observer API'sini kullanin.
Next.js Image bileseni: Otomatik boyutlandirma, format donusumu (WebP/AVIF) ve responsive gorsel destegi sunar.
Placeholder kullanin: Gorsel yuklenirken blur veya iskelet placeholder gostererek CLS (Cumulative Layout Shift) degerini iyilestirin.
SVG optimizasyonu: Ikonlar ve basit grafikler icin SVG kullanin. SVGO ile dosya boyutunu kucultun.

Performans Kontrol Listesi

React uygulamanizin performansini sistematik sekilde iyilestirmek icin asagidaki kontrol listesini kullanin:

React DevTools Profiler ile mevcut performansi olcun ve darbogazlari tespit edin.
Gereksiz yeniden render'lari React.memo, useMemo ve useCallback ile onleyin.
Buyuk bilesenleri React.lazy ve Suspense ile tembel yukleyin.
Uzun listeleri sanallastirma ile render edin.
State yapisini gozden gecirip gereksiz ust-seviye state'leri asagiya tasiyin.
Gorselleri lazy load edin ve modern formatlar (WebP, AVIF) kullanin.
Bundle boyutunu analiz edin ve gereksiz bagimliliklari kaldirin.
Web Vitals metriklerini (LCP, INP, CLS) duzenli olarak izleyin.
Uretim build'inde test yapin; gelistirme modu performansi yaniltici olabilir.
Performans butcesi belirleyin ve CI/CD pipeline'inda otomatik kontrol ekleyin.

Sonuc: React performans optimizasyonu, kullanici deneyiminin ve is metriklerinin dogrudan belirleyicisidir. Erken optimizasyondan kacinin; once olcun, darbogazlari tespit edin, sonra hedefli iyilestirmeler yapin. Bu rehberdeki teknikleri adim adim uyguladiginizda, kullanicilariniz icin hizli, akici ve keyifli bir deneyim sunabilirsiniz.