useCallback

useCallback ile callback memoization öğrenirsin.

useCallback nedir?

useCallback, bir fonksiyonu saklayan (memouze eden) hook'tur. Bileşen her render olduğunda yeni bir fonksiyon oluşmaz; aynı referans korunur. const handleClick = useCallback(() => { ... }, [deps]) şeklinde çağrılır.

Stabil referansın önemi, alt bileşenin memo'lu olduğunda ortaya çıkar. Eğer her render'de yeni bir fonksiyon gönderirsen, alt bileşen props değişti sanar ve gereksiz render olur. useCallback ile aynı referansı gönderirsen alt bileşen atlar. deps dizisi ne zaman yeniden hesaplanacağını belirler; boş dizi mount'ta bir kez hesaplar.

Stabil referans

useCallback'in ikinci parametresi bağımlılık dizisidir. Bu dizi, fonksiyonun ne zaman yeniden oluşturulacağını söyler. Boş dizi [] verirsen fonksiyon mount'ta bir kez oluşturulur ve hep aynı kalır.

Bağımlılık olarak bir değişken verirsen, o değişken değiştiğinde fonksiyon yeniden oluşur. Örneğin [count] verirsen count her değiştiğinde yeni fonksiyon oluşur. Bu, hem taze veriyi gören hem de gereksiz render'ı azaltan bir denge kurar. Bağımlılık dizisini unutmak React'in uyarı vermesine yol açar.

Uygulama useCallback ile artır

Bir Counter bileşeni yaz. count state'i tut (useState(0)). handleIncrement işlevini useCallback ile tanımla; bağımlılık dizisi [count] olsun. Bileşen <Text>{count}</Text> döndürsün.

Örnek çözümü göster

import { useState, useCallback } from "react";
import { Text } from "react-native";

function Counter() {
  const [count, setCount] = useState(0);
  const handleIncrement = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  return <Text>{count}</Text>;
}

Kendini test et

useCallback çağrısı

const handleClick = ____(() => { console.log('tıklandı'); }, []);

Cevabı göster

const handleClick = useCallback(() => { console.log('tıklandı'); }, []);

useCallback ne döndürür?
```
const fn = useCallback(() => {}, []);
```
- Bir fonksiyon
- Bir state
- Bir değer
- Bir dizi
Cevabı göster

Bir fonksiyon — useCallback bir fonksiyon döndürür.
Parçayı rolüne eşle

useCallback

Fonksiyonu saklar
deps dizisi

Yeniden hesap koşulu
stabil referans

Alt bileşeni atlatır
boş dizi

Mount'ta bir kez

Sıradaki ders: useMemo

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler