Sabit handler
- React kursu
- Orta seviye
- Ders 35/80
- 5 dk
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.
Başlangıç kodu
import { useState, useCallback } from "react";
// App bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Sabit handler neyi önler?
- CSS değişimini
- useEffect'i
- useState'i
- Alt bileşenin gereksiz çizimini Doğru cevap
Açıklama: Gereksiz alt çizimini önler.
2 useCallback bağımlılık
Bağımlılık olmayan handler için ____ kullanılır.Bağımlılık olmayan handler için useCallback ve [] kullanılır.Açıklama: useCallback ile [] kullanılır.
3 Sabit handler adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
useCallback |
sabitler |
[] |
bağımlılık yok |
id |
parametre |
handleClick(row.id) |
çağrı |