React useMemo Kullanımı
Herkese merhabalar bu yazımızda sizlerle beraber React tarafında useMemo kullanımını ele almaya çalışıyor olacağız. Öncelikle useMemo yaptığı iş bir fonksiyonu yada component’i memorize edip gereksiz yere render yada tekrar çalısmanı önlemek amacı taşımaktadır aslında bir noktada Vuejs içerisinde yer alan computed yapısı gibi düşünebiliriz. Şimdi öncelikle Dom güncellendiği zaman bildiginiz üzere componentlerde yeniden render edilmektedir peki birbirinden bağımsız olan componentlerin yeniden render edilmesine ihtiyacımız var mı ? İşte tam burada bu soruna karşılık React bizlere useMemo kullanarak bunu ele alabilirsin demiş. Hadi bizde bir örnek yaparak bunu daha iyi anlamaya çalışalım.
Kurulumlar
1-)React projesi oluşturma
npx create-react-app my-app Daha sonra src/app.js içerisine gelip aşağıdaki gibi bir kodlama yapıyorum.
import React, { useState } from 'react'
const Footer = () => {
console.log('çalıstı')
return (<footer>Footer</footer>)
}
function App() {
const [text, setText] = useState('')
return (
<div className="App">
<input value={text} onChange={(e) => { setText(e.target.value) }} />
<Footer />
</div>
)}
export default App;
görünüşte hiç bir problem yokmuş gibi duruyor , ben input’a bir değer gireceğim state değerim değişecek ve render edilecek değil mi ? İşte buradaki ana problem olan footer componentimin tekrardan render edilmesine ihtiyaç var mı ? Şimdi footer component içerisine console log yazarak kaç kere çalıştığına gelen bir bakalım.
örnekte görmüş olduğumuz gibi uygulama ilk açıldıgında çalısıyor evet bu normal fakat ben input’a ismimi yazdığımda 5 kere daha çalıstıgını görüyoruz bunun sebebi ise ismin 5 karakterli oluşu ve 5 kere render etmesi . Oysa footer componentinin oradaki input ile hiç bir ilgisi yok yani 5 kere render edilmeye ihtiyacı yok şimdi gelen bunu birde useMemo , React.memo ile yapalım.
import React, { useState } from 'react'
const Footer = () => {
console.log('çalıstı')
return (
<footer>Footer</footer>
)}
const MemoFooter = React.memo(Footer);
function App() {
const [text, setText] = useState('')
return (
<div className="App">
<input value={text} onChange={(e) => { setText(e.target.value) }} />
<MemoFooter />
</div>
);}
export default App;ve aynı şekilde tekrar çalıştırdığımızda;
yine aynı şekilde 5 karakterli bir isim yazdığımda bu sefer yalnızca bir kere çalıştığını görmüş oluyoruz, Componentlerimizi export ederken React.memo içerisine sarmalayarak ilgili componenti memorize etmiş olmaktayız. Birde gelin useMemo kullanarak bir componenti yada bir değeri nasıl memorize edebiliriz ona bakalım.
Yukarıdaki component’i bir fonksiyon içersinden döndürmeye çalışarak yola koyalım.
import React, { useState } from 'react'
const Footer = () => {
console.log('çalıstı')
return (
<footer>Footer</footer>
)}
const MemoFooter = React.memo(Footer);
function App() {
const renderFooter = () => {
return <Footer />
}
const [text, setText] = useState('')
return (
<div className="App">
<input value={text} onChange={(e) => { setText(e.target.value) }} />
{renderFooter()}
</div>
);}
export default App;Sonuç değişmeyecek yine aynı şekilde 5 karakterlik bir metin için tekrardan çalışacak işte bir fonksiyon üzerinden dönen değerleri memorize etmek için ise aşağıdaki gibi useMemo kullanabilir ve gerekli durumlarda (tekrar return etmesini istediğiniz durumlarda) bağımlılıklarını belirterek işleminizi gerçekleştirebilirsiniz.
import React, { useState, useMemo } from 'react'
const Footer = () => {
console.log('çalıstı')
return (
<footer>Footer</footer>
)}
const MemoFooter = React.memo(Footer);
function App() {
const renderFooter = useMemo(() => {
return <Footer />
}, [])
const [text, setText] = useState('')
return (
<div className="App">
<input value={text} onChange={(e) => { setText(e.target.value) }} />
{renderFooter}
</div>
);}
export default App;Eğer yazı yeterli gelmediyse buraya tıklayarak kanalımdaki videoya bakabilirsiniz.
Herkese İyi Çalışmalar Dilerim.
