Performans Optimizasyonu: React Uygulamalarını Hızlandırma

React uygulamalarınız çok mu yavaş çalışıyor? Gereksiz render işlemleri ve büyük bundle boyutları en büyük düşmanınız olabilir. İşte performans optimizasyonu için altın kurallar!

useMemo ve useCallback Kullanımı

Her render'da yeniden oluşturulan ağır hesaplamaları ve fonksiyonları hafızaya almak, uygulamanızı ciddi oranda hızlandırır. Ancak her şeye eklemek yerine sadece gerektiği yerde kullanmalısınız.

// (c) CodeMareFi - codemarefi.com.tr
import { useMemo, useCallback } from 'react';

const ExpensiveComponent = ({ data }) => {
  const sortedData = useMemo(() => {
    return data.sort((a, b) => b.value - a.value);
  }, [data]);

  const handleClick = useCallback(() => {
    console.log('Clicked!');
  }, []);
  
  return 
...
;
};

Code Splitting (Kod Bölme)

Kullanıcının o an görmediği sayfaları ve componentleri React.lazy ve Suspense kullanarak sadece ihtiyaç duyulduğunda yükleyin.