React Performans Optimizasyonu: Gereksiz Render’ları Nasıl Engellersiniz?

React, son yılların en popüler JavaScript kütüphanelerinden biri haline geldi. Ancak, karmaşık uygulamalarda performans problemleri yaşanabiliyor. React’in güçlü özelliklerinden biri, bileşenlerin tekrar render edilmesiyle güncellenmesini sağlayan reaktif yapısıdır. Ancak gereksiz render’lar, uygulamanın yavaşlamasına yol açabilir. Peki, gereksiz render’ları nasıl engelleyebiliriz?

React, her bileşeni birer fonksiyon gibi düşünerek çalıştırır. Kullanıcı etkileşimde bulunduğunda veya state değiştiğinde, ilgili bileşen yeniden render edilir. Ancak, bu render işlemi her zaman gerekli olmayabilir. Eğer state veya props değişmemişse bile, React tüm bileşeni yeniden render edebilir. Bu durum, uygulamanın performansını olumsuz etkiler. Gereksiz render’ların önüne geçmek, performansı ciddi şekilde iyileştirebilir.

Gereksiz render’lar nasıl oluşur?

React, değişen state veya props’ları izler ve buna göre render işlemi yapar. Ancak bazı durumlarda, state veya props değişmediği hâlde bileşen yeniden render edilir. Bunun sebebi, React’in her render işleminde bileşenin yeniden hesaplanması gerektiğini varsaymasıdır. Bu noktada optimizasyon yaparak, yalnızca gerçekten değişen verilerle bileşeni yeniden render edebiliriz.

React'te en yaygın performans optimizasyon tekniklerinden biri `useMemo` ve `useCallback` hook'larını kullanmaktır.

- useMemo, hesaplama sonucu değişmediği sürece bir değeri yeniden hesaplamayı engeller. Özellikle, karmaşık hesaplamalar yaptığınız durumlarda bu hook oldukça faydalıdır.

Örnek kullanım:

const expensiveComputation = useMemo(() => {
  return someHeavyComputation();
}, [dependencies]);

- useCallback, bir fonksiyonun referansının değişmesini engeller. Eğer bir fonksiyon, bileşenler arasında sürekli olarak yeniden oluşturuluyorsa, bu da gereksiz render’lara neden olabilir.

Örnek kullanım:

const memoizedCallback = useCallback(() => {
  doSomething();
}, [dependencies]);

Bu hook’lar, özellikle büyük uygulamalarda performansın artırılmasında önemli bir rol oynar.

Bir başka önemli optimizasyon tekniği de React.memo’dur. Bu, React bileşenlerinin yalnızca props değiştiğinde yeniden render edilmesini sağlar. Eğer props değişmemişse, React bileşeni yeniden render etmez ve önceki render sonucunu kullanır.

React.memo’nun kullanımı oldukça basittir:

const MyComponent = React.memo((props) => {
  return 
{props.name}
;
});

Bu kullanım, özellikle büyük uygulamalarda ciddi performans iyileştirmeleri sağlar. Unutmayın ki React.memo yalnızca props'lar değiştiğinde render yapar, state değişikliklerinde yine render işlemi gerçekleşir.

Redux, global state yönetimi için yaygın olarak kullanılan bir araçtır. Ancak, yanlış kullanıldığında gereksiz render’lara sebep olabilir. Özellikle `mapStateToProps` fonksiyonunun doğru kullanımı önemlidir.

Eğer bir bileşen yalnızca birkaç state parçasına ihtiyacı varsa, tüm state’i `mapStateToProps` ile almak yerine yalnızca ihtiyaç duyduğunuz parçaları seçmek daha performans dostudur.

Örnek kullanım:

const mapStateToProps = (state) => ({
  selectedItem: state.selectedItem
});

Bu yöntemle yalnızca gerekli state bilgilerini almak, gereksiz render’ları engeller.

Bir diğer performans optimizasyonu tekniği ise Lazy Loading ve Code Splitting’dir. Bu teknikler, uygulamanın başlangıçta yüklenen JavaScript dosyasının boyutunu küçültmeye yardımcı olur. Gereksiz kod yüklemelerini engelleyerek, uygulamanın hızlı bir şekilde yüklenmesini sağlar.

Lazy Loading, yalnızca kullanıcı tarafından ihtiyaç duyulan bileşenlerin yüklenmesini sağlar. Bu sayede uygulamanın ilk yüklenme süresi ciddi şekilde azalır.

Örnek kullanım:

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    Loading...