Sabit handler

useCallback ile sabit bir seçim handler'ı yazarsın.

Sabit handler

Bu ders StatsRow bileşenini yazacak. Her satır için bir tıklama işleyicisi vardır. useCallback ile sabitlenir; her render'da yeni fonksiyon doğmaz.

Stable handler, alt bileşene prop olarak geçtiğinde referans değişmez. React.memo'lu alt bileşen bu sayede gereksiz çizilmez.

İşleyici genellikle (id) => { ... } biçiminde parametre alır. useCallback((id) => console.log(id), []) ile bağımlılık olmadan sabitlenir.

İşleyici parametresi

Satır tıklama işleyicisi hangi satırın tıklandığını bilmelidir. İki yol: parametre olarak id almak ya da satır içinde inline fonksiyon oluşturmak.

İkinci yol her render'da yeni fonksiyon doğurur; memo'yu bozar. Birinci yol tercih edilir: const handleClick = useCallback((id) => { ... }, []). Satır içinde onClick={() => handleClick(row.id)} çağrılır.

Inline fonksiyon da her render'da yeni olur ama burada kabul edilebilir; çünkü memo satır içinde değil, satır bileşeninde yapılır. Tüm yaklaşım dengeli olmalıdır.

Uygulama StatsRow yaz

Aşağıdaki iskeleti tamamla. App bileşeni yaz. useState([1,2,3]) ile ids tanımla. handleClick'i useCallback((id) => console.log(id), []) ile tanımla. <ul> içinde ids.map(id => <li key={ '{ id }' } onClick={ '{ () => handleClick(id) }' }>{ '{ id }' }</li>) çiz. Dışa aktar.

Örnek çözümü göster

import { useState, useCallback } from "react";

function App() {
  const [ids] = useState([1, 2, 3]);
  const handleClick = useCallback((id) => console.log(id), []);
  return (
    <ul>
      {ids.map((id) => (
        <li key={id} onClick={() => handleClick(id)}>{id}</li>
      ))}
    </ul>
  );
}

export default App;

Kendini test et

Sabit handler neyi önler?
- CSS değişimini
- useEffect'i
- useState'i
- Alt bileşenin gereksiz çizimini
Cevabı göster

Alt bileşenin gereksiz çizimini — Gereksiz alt çizimini önler.

useCallback bağımlılık

Bağımlılık olmayan handler için ____ kullanılır.

Cevabı göster

Bağımlılık olmayan handler için useCallback ve [] kullanılır.

Sabit handler adımlarını eşleştir

useCallback

sabitler
[]

bağımlılık yok
id

parametre
handleClick(row.id)

çağrı

Sıradaki ders: Memo'lu liste

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler