React Performans Optimizasyonu: useMemo, useCallback ve React.memo

React Performans Optimizasyonu: useMemo, useCallback ve React.memo

React uygulamalarınız yavaşlıyor mu? Karmaşık bileşenleriniz render performansını düşürüyor mu? Bu makalede, React’in performans optimizasyon araçları olan useMemo, useCallback ve React.memo‘yu derinlemesine inceleyeceğiz. Bu araçları ne zaman, nasıl ve neden kullanmanız gerektiğini, gerçek dünya senaryolarıyla birlikte adım adım öğreneceksiniz. Performansınızı artırmak ve React uygulamalarınızın daha hızlı ve verimli çalışmasını sağlamak için bu rehberi dikkatlice inceleyin.

React Performans Optimizasyonu İçin Temel Kavramlar

React’in sanal DOM (Document Object Model) mimarisi, gerçek DOM’a göre daha hızlı güncellemeler sağlar. Ancak, karmaşık uygulamalarda bileşenlerin gereksiz yere yeniden renderlanması performans sorunlarına yol açabilir. Bu gereksiz yeniden render olaylarını önlemek için React, çeşitli optimizasyon teknikleri sunar. useMemo, useCallback ve React.memo, bu tekniklerin en yaygın ve etkili olanlarıdır. Öncelikle, bu kavramları ayrı ayrı ele alalım.

useMemo: useMemo hook’u, pahalı hesaplamaları hafızada tutarak tekrar tekrar hesaplamanın önüne geçer. Bir fonksiyon ve bağımlılık dizisi alır. Bağımlılıklardan herhangi biri değiştiğinde fonksiyon yeniden çalıştırılır ve sonucu hafızada saklanır. Aksi takdirde, önbelleğe alınmış sonuç geri döndürülür. Bu sayede, her renderda aynı hesaplamanın tekrar tekrar yapılmasının önüne geçerek performans artışı sağlanır.

useCallback: useCallback hook’u, fonksiyonları hafızada tutarak referanslarını korur. Bu, fonksiyonların her renderda yeniden oluşturulmasını önler. Bu durum, özellikle bir üst bileşene fonksiyon prop’u olarak geçen fonksiyonlarda önemlidir. Çünkü üst bileşen, fonksiyonun referansı değişmediği sürece yeniden renderlanmaz. Sonuç olarak, gereksiz yeniden render olaylarını azaltır.

React.memo: React.memo yüksek mertebeli bir bileşendir. Bir bileşeni alır ve önbelleğe alır. Props’lar değişmediği sürece, bileşen yeniden renderlanmaz. Bu, performans açısından özellikle prop’lar sık değişmeyen ve pahalı render işlemlerine sahip bileşenlerde oldukça etkilidir. Varsayılan olarak, referans karşılaştırma yapar. Ancak, areEqual fonksiyonu ile özelleştirilebilir.

useMemo Nasıl Kullanılır? Örneklerle Anlatım

useMemo’nun gücünü anlamak için, karmaşık bir hesaplama gerektiren bir senaryo ele alalım. Örneğin, büyük bir dizi üzerinde işlem yaparak bir toplam hesaplamamız gerektiğini varsayalım. Bu işlem her renderda tekrarlanırsa, performans düşüklüğüne yol açabilir.

İşte useMemo kullanmadan önceki durum:

function MyComponent() {
  const numbers = [1, 2, 3, ..., 100000]; // Büyük bir dizi
  const sum = numbers.reduce((acc, curr) => acc + curr, 0); 
  return 
Toplam: {sum}
;
}

Her renderda reduce fonksiyonu çalıştırılıyor. Şimdi useMemo ile optimize edelim:

import React, { useMemo } from 'react';

function MyComponent() {
  const numbers = [1, 2, 3, ..., 100000];
  const sum = useMemo(() => numbers.reduce((acc, curr) => acc + curr, 0), [numbers]); 
  return 
Toplam: {sum}
;
}

Artık sum değişkeni sadece numbers dizisi değiştiğinde hesaplanacak. [numbers] bağımlılık dizisi, useMemo'nun ne zaman yeniden hesaplama yapması gerektiğini belirler. Bu basit değişiklik, büyük diziler için önemli performans iyileştirmeleri sağlar. Başka bir örnek olarak, karmaşık bir görsel işlemin sonucunu useMemo ile önbelleğe alabiliriz.

useCallback Nasıl Kullanılır? Gerçek Dünya Senaryoları

Bir üst bileşene fonksiyon prop'u olarak geçen fonksiyonları optimize etmek için useCallback kullanırız. Örneğin, bir form bileşeninde, form verilerini gönderen bir fonksiyonu üst bileşene geçirelim. Bu fonksiyon her renderda yeniden oluşturulursa, gereksiz yeniden renderlara yol açabilir.

İşte useCallback kullanmadan önceki durum:

function ParentComponent() {
  const handleSubmit = (data) => {
    console.log('Veriler gönderildi:', data);
  };

  return ;
}

function ChildComponent({ onSubmit }) {
  // ... Form bileşeni ...
  return  onSubmit({ name: 'Fatih', email: 'fatih@example.com' })}>Gönder;
}

Şimdi useCallback ile optimize edelim:

import React, { useCallback } from 'react';

function ParentComponent() {
  const handleSubmit = useCallback((data) => {
    console.log('Veriler gönderildi:', data);
  }, []); // Boş dizi, fonksiyonun asla yeniden oluşturulmayacağını belirtir

  return ;
}

function ChildComponent({ onSubmit }) {
  // ... Form bileşeni ...
  return  onSubmit({ name: 'Fatih', email: 'fatih@example.com' })}>Gönder;
}

Boş bağımlılık dizisi sayesinde, handleSubmit fonksiyonu sadece ilk renderda oluşturulur ve daha sonra referansı korunur. Bu da ChildComponent'ın gereksiz yeniden renderlanmasını önler. Bu, özellikle büyük formlar veya karmaşık işlemler içeren bileşenlerde önemlidir.

React.memo Nasıl Kullanılır? Performans Karşılaştırmaları

React.memo, bileşenlerin gereksiz yeniden renderlanmasını önlemek için kullanışlıdır. Özellikle prop'ları sık değişmeyen ve render işlemleri pahalı olan bileşenler için idealdir. Bir liste bileşenini ele alalım. Liste öğelerinin içeriği değişmedikçe, bileşenin yeniden renderlanmasına gerek yoktur.

const MyList = React.memo(({ items }) => (
  

    {items.map((item) => (
      
{item.name}
    ))}
  
));

React.memo, varsayılan olarak referans eşitliğini kontrol eder. Ancak, areEqual prop'u kullanılarak özelleştirilebilir. Bu, karmaşık nesnelerin karşılaştırılmasında daha hassas kontrol sağlar.

Performans karşılaştırması için, React.memo kullanmadan ve kullandıktan sonra render sayılarını karşılaştıralım. Bu, React Developer Tools veya benzeri araçlarla yapılabilir. Genellikle, React.memo ile önemli ölçüde render sayısı azalır, bu da performans iyileşmesine yol açar.

İleri Düzey Optimizasyon Teknikleri: Şartlı Renderlama

useMemo, useCallback ve React.memo'nun ötesinde, performansı daha da iyileştirmek için diğer teknikleri kullanabiliriz. Şartlı renderlama, bileşenlerin yalnızca gerektiğinde yeniden renderlanmasını sağlar. shouldComponentUpdate lifecycle metodu veya React'in yeni hook'ları ile bu gerçekleştirilebilir. useMemo ile bir koşul ekleyerek de şartlı renderlama yapabiliriz.

import React, { useMemo, useState } from 'react';

function MyComponent({ data }) {
  const [count, setCount] = useState(0);

  const expensiveCalculation = useMemo(() => {
    if (data.length > 1000) {
       return complexCalculation(data);
    }
    return null;
  }, [data]);

  return (
    

      
Count: {count}
       setCount(count + 1)}>Artır
      {expensiveCalculation && 
Sonuç: {expensiveCalculation}
}
    
  );
}

Bu örnekte, expensiveCalculation sadece data dizisinin uzunluğu 1000'den büyükse hesaplanır. Bu sayede, büyük veriler için performans artışı sağlanır. Ayrıca, memoize edilmiş sonuç, sonraki renderlarda yeniden hesaplanmaz. Bu teknik, performans sorunlarını gidermek için çok önemli bir stratejidir.

Önemli Uyarılar ve Güvenlik Önlemleri

Dikkat: useMemo ve useCallback'ı gereksiz yere kullanmaktan kaçının. Bu hook'lar, performans iyileştirmesi sağlasa da, gereksiz yere kullanımı, kodun karmaşıklığını artırabilir ve okunabilirliğini azaltabilir. Sadece gerçekten pahalı işlemler için kullanılmaları önemlidir. Ayrıca, bağımlılık dizilerinin doğru bir şekilde tanımlanması, optimizasyonun doğru çalışması için kritik öneme sahiptir. Yanlış tanımlanmış bağımlılık dizileri, beklenmedik davranışlara yol açabilir.

Sonuç ve Sıkça Sorulan Sorular

Bu makalede, React performans optimizasyonu için kullanılan üç önemli hook olan useMemo, useCallback ve React.memo'yu detaylı olarak inceledik. Bu araçları doğru bir şekilde kullanarak, React uygulamalarınızın performansını önemli ölçüde artırabilirsiniz. Ancak, bu araçları gereksiz yere kullanmaktan kaçınmak da oldukça önemlidir. Performans optimizasyonu, uygulamanızın özel gereksinimlerine bağlı olarak değişir. Daha fazla bilgi için (https://fatihsoysal.com) inceleyebilirsiniz.

Sıkça Sorulan Sorular:

• useMemo ve useCallback arasındaki fark nedir? useMemo değerleri, useCallback ise fonksiyonları önbelleğe alır.
• React.memo her zaman performansı iyileştirir mi? Hayır, bazı durumlarda performans iyileşmesi gözlemlenmeyebilir veya hatta küçük bir düşüş yaşanabilir. Bu, bileşenin karmaşıklığına ve prop'ların sıklığına bağlıdır.
• Bağımlılık dizisi (dependency array) nedir? useMemo ve useCallback'ın ne zaman yeniden çalıştırılacağını belirleyen bir dizi değerdir.
• areEqual fonksiyonu ne işe yarar? React.memo'da, özelleştirilmiş bir eşitlik karşılaştırma fonksiyonu sağlar.
• Çok fazla optimizasyon zararlı olabilir mi? Evet, gereksiz optimizasyonlar kodun okunabilirliğini ve sürdürülebilirliğini azaltabilir.

Yazar: Fatih Soysal