Mala Anlatır Gibi React — 3: React.memo, useMemo, useCallback

React (Resim, 1.)

useMemo, hesaplama açısından maliyetli işlemleri tekrarlamadan kaçınmak için kullanılır. Bir değer veya hesaplama işlemi, bağımlılık olarak belirlenen değişkenler değişmediği sürece önbelleğe alınır. Bu sayede, gereksiz yere tekrar hesaplama yapılmaz ve bileşenin performansı artar.

Nasıl çalışır?

import React, { useMemo } from 'react';

function Ornek({ num }) {
  const expensiveComputation = useMemo(() => {
    console.log("Başlıyor...");
    return num * 2;
  }, [num]);
  return <div>{expensiveComputation}</div>;
}

useCallback, bir fonksiyonu bağımlılıklarına göre önbelleğe almak için kullanılır. Bu sayede, fonksiyon her render'da yeniden oluşturulmaz. Özellikle, alt bileşenlere prop olarak fonksiyon geçerken faydalıdır, çünkü her render'da yeni bir fonksiyon oluşturulursa, alt bileşenler tekrar render olabilir.

Nasıl çalışır?

import React, { useCallback } from 'react';

function Ornek({ onButtonClick }) {
  const handleClick = useCallback(() => {
    console.log("Button tıklandı!");
  }, [onButtonClick]);
  return <button onClick={handleClick}>Click me</button>;
}

Yukarıdaki örnekte, handleClick, onButtonClick değişmediği sürece önbelleğe alınır. Bu, gereksiz render'ları önler ve performansı artırır.

React.memo, bir bileşeni "hafıza"da tutarak, props değişmediği sürece tekrar render olmasını önler. Bu, fonksiyonel bileşenlerin gereksiz yere tekrar render edilmesini engelleyerek performansı artırır.

Nasıl çalışır?

import React from 'react';

const MyComponent = React.memo(function MyComponent({ text }) {
  console.log("Render edildi...");
  return <div>{text}</div>;
});
function Ornek({ text }) {
  return <MyComponent text={text} />;
}

Ornek bileşeni ne kadar render edilirse edilsin, text değişmediği sürece MyComponent tekrar render edilmez. Bu, performansı artırmak için güçlü bir yöntemdir.