React memo kullanımı

React memo nedir?

React kendi dökümanında memo için tanımı şu şekilde;

React.memo bir üst katman bileşenidir. React.PureComponent‘e benzer ancak sınıflar yerine fonksiyon bileşenleri için geçerlidir.

Eğer fonksiyon bileşeniniz aynı prop’lar ile aynı sonucu render ediyor ise, bazı durumlarda sonucu ezberleyerek performans artışı sağlaması için onu bir React.memo çağrısına sarabilirsiniz. Bu, React’in bileşeni render etmeyi atlayacağı ve son render edilen sonucu yeniden kullanacağı anlamına gelir.

React.memo sadece prop değişikliklerini kontrol eder. Eğer React.memo içine sarmalanmış bileşeninizde useState ya da useContext hookları varsa, state ya da context her değiştiğinde bilşeniniz tekrar render edilecektir.

Varsayılan olarak, props nesnesindeki karmaşık yapıları sadece yüzeysel bir şekilde karşılaştıracaktır. Karşılaştırma üzerinde kontrolü ele almak istiyorsanız, ikinci argüman olarak özel bir karşılaştırma fonksiyonu sağlayabilirsiniz.

Bu metod yalnızca bir performans optimizasyonu olarak vardır. Bir render işlemini “önlemek” için ona güvenmeyin. Bu, hatalara neden olabilir.

Daha kısa şekilde açıklayacak olursak, memo ile kullanılan componentin uygulama re-render olduğunda belirttiğimiz şartla sağlanmadığı sürece virtual dom’da karşılaştırma yapmasını önleyebiliriz, buda bize performans için bir artı sağlamaktadır.

Şimdi de ne anlatılmak istendiğini bir örnekte uygulayalım.

Proje Oluşturma

npx create-react-app router-app

src/hello.js adında basit bir component oluşturalım.

import React from "react";

const Hello=()=>{
    console.log("hello componenti çalışıyor")
    return <h1>Hello World :)</h1>
}
export  default Hello

src/App.js dosyamızın içeriğini temizleyip içerisinde basit bir input yerleştirip componentimizi çağıralım.

import React, {useState} from 'react';
import './App.css';
import Hello from "./hello";
function App() {
    const [inputVal,setInputVal]=useState("")
  return (
    <div className="App">
        <input type={"text"} value={inputVal} onChange={(e)=>{setInputVal(e.target.value)}} />
        <Hello/>
    </div>
  );
}
export default App;

Görüldüğü gibi ilk olarak hello componentimiz sayfa render edildiği için çalışıyor, daha sonra inputa “merhaba react (13 karakter)” yazdığımda hello componentimi ilgilendiren bir değişim olmamasına rağmen çalışmaktadır, bunun önüne geçmek için;

import React,{memo} from "react";

const Hello=()=>{
    console.log("hello componenti çalışıyor")
    return <h1>Hello World :)</h1>
}
export  default memo(Hello)

memo import edip componenti export ederken memo içerisine alıp tekrar deneyelim.

Görüldüğü gibi inputa “merhaba react” yazmama rağmen hello componentim bundan etkilenmedi ve sayfa ilk yüklendiği anda çalıştı.

Peki bunu şarta bağlı olarak componentin içindeki bir fonksiyonda nasıl kullanabiliriz? Çözüm basit;

import React, {useMemo, useState} from 'react';
import './App.css';
function App() {
    const [inputVal,setInputVal]=useState("")
    const renderHello=useMemo(()=>{
        console.log("renderHello Çalışıyor")
        return <h1>Hello World :)</h1>
    },[] /* İlgili dependency tanımları */)
  return (
    <div className="App">
        <input type={"text"} value={inputVal} onChange={(e)=>{setInputVal(e.target.value)}} />
        {renderHello}
    </div>
  );
}
export default App;

react hookslarla gelen useMemo’yu kullanarak, dependency belirtebiliriz, eğer boş bir array olarak bırakırsak sayfa ilk yüklendiğinde çalışacaktır eğer içersine bir değer verirsek vermiş olduğumuz değerin değeri değiştiği anda çalışacaktır.

Herkese İyi Çalışmalar Dilerim. :)