React’te useMemo ve useCallback: Performans Optimizasyonu için İki Güçlü Araç
React uygulamalarında performans önemli bir husustur. Özellikle karmaşık bileşenler ve sık güncellemelerle performans sorunları yaşanabilir. React, bu sorunları ele almak için **useMemo** ve **useCallback** gibi performans optimizasyon araçları sunmaktadır. Bu makalede, **useMemo** ve **useCallback**’in ne olduğunu, ne zaman kullanılacağını ve nasıl kullanılacağını detaylı olarak inceleyeceğiz.
## useMemo: Yinelenen Hesaplamaları Önlemek
**useMemo**, bir fonksiyonun sonucunu bellek içerisinde saklar ve aynı girdilerle tekrar çağrıldığında hesaplama yapmaktan kaçınarak performansı artırır. Bu, özellikle karmaşık hesaplamaların olduğu durumlarda faydalıdır. **useMemo**’nun kullanım senaryoları şunlardır:
* **Karmaşık Hesaplamalar:** Eğer bir bileşende karmaşık bir hesaplama yapılıyorsa ve bu hesaplama sonucu sık sık kullanılıyorsa, **useMemo**’yu kullanarak hesaplama sonucunu belleğe kaydedebilir ve tekrarlanmasını engelleyebilirsiniz.
* **Sık Güncellenen Veriler:** Bir bileşen içerisinde sık güncellenen verilerin olduğu durumlarda, **useMemo** kullanarak bu verileri bellek içerisinde saklayabilir ve tekrar hesaplanmasını engelleyebilirsiniz.
**useMemo** kullanımı:
“`javascript
const MyComponent = () => {
const expensiveCalculation = useMemo(() => {
// Karmaşık hesaplama burada yapılır.
return calculateSomethingComplex();
}, [dependency1, dependency2]);
return (
{expensiveCalculation}
);
};
“`
**dependency1** ve **dependency2** bağımlılıklarıdır. Bu bağımlılıklardan biri değiştiğinde **useMemo** yeni bir hesaplama yapar.
## useCallback: Fonksiyon Belleği ve Yeniden Oluşturma Önleme
**useCallback**, bir fonksiyonu bellek içerisinde saklar ve aynı bağımlılıklarla tekrar çağrıldığında yeniden oluşturulmasını engeller. Bu, özellikle bir fonksiyonun bir alt bileşene bir prop olarak geçirilip, alt bileşenin bu prop’u sık sık kullandığı durumlarda faydalıdır. **useCallback**’ın kullanım senaryoları şunlardır:
* **Alt Bileşenlere Prop Olarak Fonksiyon Geçirme:** Bir fonksiyonu alt bileşenlere prop olarak geçiriyorsanız ve bu fonksiyon sık sık tekrar render edilmesini tetikliyorsa, **useCallback**’ı kullanarak bu fonksiyonu bellek içerisinde saklayabilir ve yeniden oluşturulmasını engelleyebilirsiniz.
* **Fonksiyonları Olay Dinleyicilerine Bağlama:** Bir fonksiyonu bir olay dinleyicisine bağladığınızda, **useCallback**’ı kullanarak fonksiyonun bellek içerisinde saklanmasını ve yeniden oluşturulmasını engelleyebilirsiniz.
**useCallback** kullanımı:
“`javascript
const MyComponent = () => {
const handleButtonClick = useCallback(() => {
// Fonksiyon burada tanımlanır.
console.log(“Button clicked!”);
}, []);
return (
);
};
“`
Boş bir dizi (`[]`), **handleButtonClick** fonksiyonunun hiç bir bağımlılığa sahip olmadığını gösterir. Bu nedenle, **useCallback** bu fonksiyonu her render’da yeniden oluşturmaz.
## useMemo ve useCallback’i Birlikte Kullanmak
**useMemo** ve **useCallback**, birlikte kullanıldığında performans optimizasyonunda önemli bir rol oynar. Örneğin, **useMemo**’yu kullanarak karmaşık bir hesaplama sonucunu belleğe kaydedebilir ve **useCallback**’ı kullanarak bu hesaplama sonucunu kullanan bir fonksiyonu bellek içerisinde saklayabilirsiniz. Bu, hem hesaplama maliyetini hem de fonksiyon yeniden oluşturma maliyetini azaltır.
## Önemli Notlar
* **useMemo** ve **useCallback**, performansı optimize etmek için kullanışlı araçlardır, ancak her zaman gerekli değildir. Gereksiz kullanımı, performans üzerinde olumsuz etki yaratabilir.
* **useMemo** ve **useCallback**, sadece performansı optimize etmek için kullanılmalı, kodun karmaşıklığını artırmak için kullanılmamalıdır.
## Sonuç
**useMemo** ve **useCallback**, React uygulamalarında performans optimizasyonunda önemli bir rol oynar. Bu araçları kullanarak karmaşık hesaplamaları ve fonksiyon yeniden oluşturma maliyetini azaltabilirsiniz. Ancak, bu araçları gereksiz yere kullanmaktan kaçınmanız önemlidir. Daha ayrıntılı bilgi için **[fatihsoysal.com](https://fatihsoysal.com/)** web sitemi ziyaret edebilirsiniz.
## #Etiketler
React, useMemo, useCallback, Performans Optimizasyonu, Javascript, Web Geliştirme, Front-End