React uygulamalarınızda performans sorunlarıyla mı karşılaşıyorsunuz? Büyük uygulamalar geliştikçe, render işlemlerinin sayısı arttıkça ve kullanıcı etkileşimleri sıklaştıkça, uygulamanızın performansı önemli bir mesele haline gelir. Neyse ki, React, performansı optimize etmek için birkaç güçlü araç sunuyor. Bu araçlardan ikisi, `useMemo` ve `useCallback`. Ancak, bu araçları ne zaman kullanmalısınız? Hangi durumlarda gerçekten faydalıdırlar? Bu yazımızda, bu soruları yanıtlayacağız ve React'teki performans optimizasyonunu derinlemesine inceleyeceğiz.
React'te Performans Sorunları
useMemo: Hesaplamalı Sonuçları Hafızada Tutmak
# Örnek Kullanım
```jsx
import React, { useMemo, useState } from 'react';
const ExpensiveComponent = ({ items }) => {
const [filter, setFilter] = useState('');
// Bu hesaplama yalnızca 'items' veya 'filter' değiştiğinde yeniden yapılır
const filteredItems = useMemo(() => {
return items.filter(item => item.includes(filter));
}, [items, filter]);
return (
value={filter}
onChange={e => setFilter(e.target.value)}
placeholder="Filter items"
/>
- {item}
{filteredItems.map((item, index) => (
))}
);
};
```
Bu örnekte, filtreleme işlemi yalnızca `items` veya `filter` değiştiğinde yapılır. Eğer başka bir şey değişirse, React daha önce hesaplanmış olan `filteredItems` listesini kullanır ve gereksiz hesaplama yapılmaz.
useCallback: Fonksiyonları Hafızada Tutmak
# Örnek Kullanım
```jsx
import React, { useCallback, useState } from 'react';
const ChildComponent = React.memo(({ onClick }) => {
console.log('Child rendered');
return ;
});
const ParentComponent = () => {
const [count, setCount] = useState(0);
// useCallback ile 'handleClick' fonksiyonu yalnızca 'count' değiştiğinde yeniden oluşturulur
const handleClick = useCallback(() => {
setCount(prevCount => prevCount + 1);
}, [count]);
return (
Count: {count}
);
};
```
Bu örnekte, `handleClick` fonksiyonu yalnızca `count` değeri değiştiğinde yeniden oluşturulur. Bu, `ChildComponent`'in gereksiz yere yeniden render edilmesini engeller.
useMemo ve useCallback Ne Zaman Kullanılmalı?
Özetle, `useMemo` ve `useCallback`'i doğru kullanmak, uygulamanızın daha verimli çalışmasını sağlayabilir. Ancak, her zaman "gereksiz yere" kullanmamaya özen gösterin. Her optimizasyonun bir maliyeti vardır ve gereksiz optimizasyonlar, kodun okunabilirliğini zorlaştırabilir.
