React Tutorial 2023 55 – Optimizasyon Teknikleri 2 – useCallback Hook’u

Merhabalar.

Optimizasyon tekniklerimizi incelemeye bu yazımda da devam ediyorum. Bu yazımızın konusu useCallback Hook’u.

useCallback hook’u, bir fonksiyonun tanımlamasını bir bileşenin yeniden render edilmesi sırasında önbelleğe almanızı sağlar. Bu, performansı artırır çünkü fonksiyonun yeniden oluşturulmasını önler.

Her render’landırma sırasında bir bileşen, içinde tanımlanan tüm fonksiyonları yeniden oluşturur. Bu, bileşenin durumu veya props’ları değişmediği halde, gereksiz yeniden render’landırmaları tetikleyebilir. 

useCallback hook’u, bu sorunu önler çünkü fonksiyonu önbelleğe alır ve sadece gerektiğinde yeniden oluşturur.

useCallback hook’unun sözdizimi aşağıdaki gibidir:

const memoizedCallback = useCallback(
 () => {
   doSomething(a, b);
 },
 [a, b],
);

Bu örnekte, doSomething fonksiyonu sadece a veya b değişkenlerinin değiştiği zaman yeniden oluşturulur. Eğer bu değişkenler değişmezse, useCallback hook’u, doSomething fonksiyonunun önbelleğe alınmış sürümünü döndürür.

useCallback hook’unun sınırlı bir sayıda durumda kullanılması önerilir. Özellikle, bir fonksiyonun performansı kritik olup olmadığını dikkate almanız gerekir. Ayrıca, useCallback hook’unun bağımlılıklarını dikkatlice belirtmeniz gerekir. Bu, fonksiyonun sadece gerektiğinde önbelleğe alınmasını sağlar.

useCallback hook’unun bazı yanlış kullanımları vardır. Örneğin, useCallback hook’unu tüm fonksiyonlar için kullanmak istemeniz gerekmez. Ayrıca, useCallback hook’unu kullanırken, fonksiyonun bağımlılıklarını dikkatlice belirtmeniz gerekir. Eğer bağımlılıklar dikkatlice belirtilmezse, fonksiyonun gereksiz yeniden oluşturulmasına neden olabilir.

useCallback hook’unun bir diğer hatalı kullanımı da, fonksiyonun önbelleğe alınmış sürümünün, bileşenin durumu veya props’larını okumadan yeni bir durum oluşturmayı sağlamaktır. Bu, gereksiz bağımlılıkları önlemeye yardımcı olabilir.

Şöyle bir başka örneğe bakalım.

import React, { useState, useCallback } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  // useCallback kullanımı
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // Bağımlılık olarak 'count' ekleniyor

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment Count</button>
    </div>
  );
};

export default App;

Bu örnekte, handleClick fonksiyonu useCallback ile oluşturuldu. Bu fonksiyon, sadece count state’i değiştiğinde güncellenir. Bu, eğer count değişmemişse, aynı referansın kullanılmasını sağlar ve gereksiz yeniden render’ları önler, bu da performansı artırır.

Sonuç olarak, useCallback hook’u, bir fonksiyonun yeniden oluşturulmasını önlemek ve böylece performansı artırmak için kullanılabilir. Ancak, bu hook’un dikkatli bir şekilde kullanılması gerekir, çünkü yanlış kullanıldığında performansı azaltabilir veya hatta hatalara yol açabilir.

Bir sonraki yazımda görüşmek üzere.