React yazı serimize devam ediyoruz. Bu yazımızda React useMemo Nedir? ve React useMemo Kullanımı’na bakacağız. React öğrenirken çok fazla karşınıza çıkmasa da bazı projelerinizde bunu kullanmanız gerekebilir. Şimdi React useMemo Nedir ona bakalım.
React Performansını useMemo Kullanarak Artırma
Yazılım geliştiriciler olarak React dünyasına adım attığımızda, uygulamaların performansını artırmanın verimli ve akıcı uygulamalar oluşturmak için önemli olduğunu fark ederiz. Uygulamalar karmaşıklaştıkça, performans iyileştirmelerinin önemi de artar. İşte bu noktada React içindeki useMemo hook devreye giriyor ve hesaplamaları optimize etmek, React uygulamalarının performansını artırmak için güçlü bir araç sunuyor.
React’te useMemo Kullanımı
React de componentler, genellikle yoğun veya zaman alıcı hesaplamalar içerebilir. Bu hesaplamalar bir componentin yaşam döngüsü içinde birden çok kez tekrarlanabilir ve gereksiz iş yükü oluşturabilir. İşte burada React içindeki useMemo hook devreye girer. Bu hook, hesaplamaları optimize etmek için sonuçlarını hafızada tutar. Basitçe ifade etmek gerekirse, bir hesaplamanın girdileri aynı kaldığında, daha önce hesaplanmış sonuç tekrar hesaplanmak yerine, aynen döndürülür.
Örnek 1: Liste Elemanlarının Optimizasyonu
useMemo hook’unu daha iyi anlamak için örnek bir senaryoya göz atalım. Diyelim ki bir componentimiz var ve bu component bir liste elemanlarını render ediyor. Bu listeyi her render sırasında tekrar hesaplamanın gereksiz olabileceğini düşünelim.
useMemo ile bu hesaplamayı optimize edebiliriz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { useMemo } from 'react'; const items = [{name: 'Red', id: 1}, {name: 'Blue', id: 2}] const ListComponent = () => { const listItems = useMemo(() => { return items.map(item => <li key={item.id}>{item.name}</li>); }, [items]); return <ul>{listItems}</ul>; } export default ListComponent |
Örnek 2: Hesaplamaların Bellekte Tutulması ve Performans
Başka bir örnek olarak, hesaplamaların bellekte tutulması ve gereksiz hesaplamaların engellenmesini ele alalım. Aşağıdaki örnekte, iki sayının toplamını hesaplayan bir bileşenimiz var ve bu hesaplamayı bellekte tutmayı sağlayacağız:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { useMemo } from 'react'; const SumComponent = () => { const number1 = 5; const number2 = 6; const sum = useMemo(() => { console.log('Sum calculated'); // Sadece hesaplandığında konsola yazdırır return number1 + number2; }, [number1, number2]); return <div>Sum: {sum}</div>; } export default SumComponent |
Çıktı: (Örnek 1 ve Örnek 2 için)
Umarım “React useMemo Nedir? ve React useMemo Kullanımı” başlıklı yazım sizin için faydalı olmuştur. useMemo kullanımı ile ilgili sorunuz olursa yorum kısmından sormayı unutmayın.
Şu yazılar da ilginizi çekebilir.
React useContext Nedir? React useContext Kullanımı
Happy coding!
