FrontEnd Developer Road Map

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.

Murat Bilginer

21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri için DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.

Share
Published by
Murat Bilginer

Recent Posts

Kedimiz Oly & FIP Süreci 9 – 1 Haftalık GS İğnesi Serüveni – Oly İyileşiyor mu?

Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…

2 gün ago

Kedimiz Oly & FIP Süreci 8 – Yeniden Hayvan Hastanesi – Sonuç Kontrolü ve Sonrası…

Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…

2 gün ago

Kedimiz Oly & FIP Süreci 7 – GS İğnesine Başlama Kararımız ve Oly’de Dikkat Ettiklerimiz

Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…

3 gün ago

Kedimiz Oly & FIP Süreci 6 – İstanbul Üniversitesi Cerrahpaşa Hayvan Hastanesi Serüveni ve Sonrası

Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…

4 gün ago

Kedimiz Oly & FIP Süreci 5 – Teşhisten Önce Biz… Veterinerimize Güvenebilir Miydik?

Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…

4 gün ago

Kedimiz Oly & FIP Süreci 4 – Antalya’ya Yolculuk – Bir Şeyler Ters Gidiyor… & İstanbul’a Geri Dönüş

9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…

4 gün ago