React Tutorial 2023 56 – Optimizasyon Teknikleri 3 – useMemo Hook’u

Merhabalar.

Optimizasyon tekniklerimizi incelemeye bu yazımda da devam ediyorum. Bu yazımızın konusu useMemo Hook’u.

useMemo hook’u, React’ta performans optimizasyonu için kullanılan bir kancadır. Bu hook, belirli bir hesaplama veya işlemin sadece bağlı olduğu bağımlılıklar değiştiğinde yeniden hesaplanmasını sağlar.

useMemo Hook’unun Avantajları

Performansı artırır: Pahalı hesaplamaların sonuçlarını önbelleğe alarak, React uygulamanızın performansını önemli ölçüde artırabilirsiniz. Bu, büyük miktarda veri veya karmaşık hesaplamalarla başa çıkmak için özellikle kullanışlıdır.

Gereksiz yeniden renderlendirmeleri azaltır: Bir bileşen yeniden render edildiğinde, bileşen içindeki tüm fonksiyonların yeniden çalıştırılmasını tetikleyebilir. useMemo hook’unu kullanarak, fonksiyonların gereksiz yeniden çalıştırılmasını önleyebilirsiniz.

Okunabilirliği artırır: Pahalı hesaplamaları bileşen kodunuzun geri kalanından ayırarak, kodunuzun okunabilirliğini ve bakımını artırabilirsiniz dzone.com.

useMemo Hook’unun Bazı Yaygın Kullanım Durumları

Karmaşık hesaplamalar veya veri işleme: Bileşeninizin karmaşık hesaplamalar yapması veya büyük miktarda veri işlemesi gerekiyorsa, useMemo hook’unu kullanarak sonucun önbelleğe alınmasını ve gereksiz yeniden hesaplamaların önlenmesini sağlayabilirsiniz.

Veri filtreleme veya sıralama: Bileşeninizin belirli ölçütlere göre veri filtreleme veya sıralama gerekiyorsa, useMemo hook’unu kullanarak filtrelenmiş veya sıralanmış sonucun önbelleğe alınmasını ve her renderlendirme sırasında verinin yeniden işlenmesini önleyebilirsiniz.

Geri çağırma fonksiyonlarını önbelleğe alma: Bileşeninizin geri çağırma fonksiyonu olan bir alt bileşene prop olarak geçtiği durumlarda, useMemo hook’unu kullanarak fonksiyonun önbelleğe alınmasını ve alt bileşenlerin gereksiz yeniden renderlendirmesini önleyebilirsiniz.

Pahalı renderlendirme: Bileşeninizin çok sayıda alt bileşeni veya karmaşık renderlendirme mantığı varsa, useMemo hook’unu kullanarak render edilen çıktının önbelleğe alınmasını ve gereksiz yeniden renderlendirmeleri önleyebilirsiniz.

API çağrılarını optimize etme: Bileşeninizin kullanıcı eylemlerine dayalı olarak API çağrıları yapıyorsa, useMemo hook’unu kullanarak API yanıtının önbelleğe alınmasını ve verinin her renderlendirme sırasında gereksiz yeniden çekilmesini önleyebilirsiniz.

Genel Yapı

Genel olarak, useMemo şu şekilde kullanılır:

const memoizedValue = useMemo(() => {
 // compute and return the memoized value
}, [dependency1, dependency2, ...]);

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Burada computeExpensiveValue fonksiyonu, önceki değerle aynı bağımlılıklara sahip olması durumunda önbelleğe alınacaktır. Bu sayede, bağımlılıklardan biri değişmediği sürece aynı değeri tekrar tekrar hesaplamaktan kaçınılır.

İşte useMemo‘nun bazı anahtar noktaları:

Bağımlılıkların Belirlenmesi: useMemo‘nun ikinci argümanı olarak verilen dizi, hangi değerlerin değiştiğini belirler. Eğer bu değerlerden biri değişirse, useMemo içindeki fonksiyon yeniden çalıştırılır.

Performans Optimizasyonu: useMemo sayesinde gereksiz yere hesaplama yapmaktan kaçınılarak uygulamanın performansı artırılabilir. Özellikle büyük veri hesaplamaları veya karmaşık bileşenlerde kullanılabilir.

Tekrar Hesaplama İhtimaline Karşı: Bu hook, özellikle render sırasında maliyetli bir hesaplama yapılacaksa kullanışlıdır. Örneğin, büyük bir liste üzerinde filtreleme yapma işlemi gibi.

Bir örnekle inceleyelim.

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

const ExpensiveComponent = ({ data }) => {
  // useMemo kullanarak hesaplama yapma
  const expensiveValue = useMemo(() => {
    console.log('Expensive calculation');
    // Burada data'ya bağlı bir hesaplama yapılabilir
    return data.reduce((acc, val) => acc + val, 0);
  }, [data]);

  return (
    <div>
      <p>Expensive Value: {expensiveValue}</p>
    </div>
  );
};

const App = () => {
  const [data, setData] = useState([1, 2, 3, 4, 5]);

  return (
    <div>
      <button onClick={() => setData([...data, Math.random()])}>
        Add Random Number
      </button>
      <ExpensiveComponent data={data} />
    </div>
  );
};

export default App;

Bu örnekte, ExpensiveComponent içindeki hesaplama, sadece data değiştiğinde gerçekleşir ve gereksiz yere her render sırasında yapılmaz.

Bir sonraki yazımda görüşmek üzere.