React.Js useMemo() Kullanımı

useMemo()

useMemo React'ta bir hook'tur ve pahalı hesaplama işlemlerini optimize etmek için kullanılır. Bu hook, bir değeri ve bir bağımlılık dizisi alır. Eğer bağımlılık dizisindeki değerler değişmezse, useMemo aynı değeri döndürür. Eğer bağımlılıklar değişirse, yeni bir değer hesaplar.

Bu özellik, özellikle bileşenlerin gereksiz yere yeniden render olmasını önlemek veya kontrol etmek için yararlıdır. Örneğin, bir hesaplama işlemi çok zaman alıyorsa ve bu hesaplamanın sonucu bir bileşene props olarak geçiliyorsa, useMemo kullanarak bu tür gereksiz hesaplamaları önleyebilirsiniz.

Kullanımı

useMemo'nun temel kullanımı şu şekildedir:

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

• computeExpensiveValue(a, b): Memoize edilmek istenen hesaplama işlemi.
• [a, b]: Bağımlılık dizisi. Bu değerler değiştiğinde hesaplama yeniden yapılır.

Örnek

import React, { useMemo } from 'react';
function App({ a, b }) {
const result = useMemo(() => {
let sum = 0;
for (let i = 0; i < 1000000000; i++) {
sum += i;
}
return sum + a + b;
}, [a, b]);
return (
<div>
{result}
</div>
);
}

Bu örnekte, result değeri sadece a veya b değiştiğinde yeniden hesaplanır. Diğer durumlarda, useMemo daha önce hesaplanan değeri döndürür, bu da performansı artırır.

Dikkat Edilmesi Gerekenler

• useMemo yalnızca bileşenlerin en üst seviyesinde kullanılmalıdır. Döngüler, koşullar veya iç içe fonksiyonlar içinde kullanılmamalıdır.
• Bağımlılık dizisini dikkatli bir şekilde belirlemek önemlidir. Eksik veya fazla bağımlılık, beklenmeyen davranışlara yol açabilir.
• useMemo kesinlikle bir performans optimizasyonu aracıdır ve semantik bir garanti sağlamaz. Yani, React gerektiğinde hesaplamayı atlayabilir. Bu nedenle, yan etki içeren işlemler için useMemo kullanılmamalıdır; bunun yerine useEffect kullanılmalıdır.
• useMemo hook'u, performans optimizasyonu için oldukça yararlıdır, ancak gereksiz yere veya yanlış bir şekilde kullanıldığında performansı olumsuz etkileyebilir. Bu nedenle, sadece gerçekten ihtiyaç duyulduğunda kullanılması önerilir.