Özet - useCallback

useCallback ile sabit bir handler verip React.memo'lu alt bileşeni korursun.

Özet - useCallback

Bu grupta useCallback'in ne olduğunu,React.memo ile nasıl çalıştığını ve useMemo ile ilişkisini öğrendin. Artık sabit referansları güvenle yönetebilirsin.

Reçete: alt bileşene prop geçen fonksiyonları useCallback ile sar, bağımlılık dizisini eksiksiz yaz, küçük fonksiyonlar için kullanmaktan kaçın. React.memo ile birlikte kullanıldığında ciddi hız artışı sağlar.

Bir sonraki adımda useCallback + React.memo kullanan bir liste bileşeni yazacaksın.

Uygulama MemoList yaz

Aşağıdaki iskeleti tamamla. App bileşeni yaz. useState(0) ile count, useState(["a","b"]) ile items tanımla. handleAdd'i useCallback(() => setItems(prev => [...prev, "yeni"]), []) ile tanımla. <button onClick={ '{ handleAdd }' }>Ekle</button> ve <p>{ '{ count }' }</p> göster. Dışa aktar.

Örnek çözümü göster

import { useState, useCallback } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [items, setItems] = useState(["a", "b"]);
  const handleAdd = useCallback(() => setItems((prev) => [...prev, "yeni"]), []);
  return (
    <div>
      <p>{count}</p>
      <button onClick={handleAdd}>Ekle</button>
    </div>
  );
}

export default App;

Kendini test et

useCallback ve React.memo birlikte ne sağlar?
- Gereksiz alt çizimini önler
- Daha az kod
- Daha iyi CSS
- useEffect'i atlar
Cevabı göster

Gereksiz alt çizimini önler — İkisi birlikte gereksiz çizimi önler.
useCallback reçetesini eşleştir

fonksiyon prop

useCallback
React.memo

alt
deps

eksiksiz
küçük

kullanma

Sıradaki ders: React.memo nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler