useState vs useReducer
- React kursu
- Başlangıç
- Ders 63/84
- 4 dk
Hangi durumlarda useReducer'ın tercih edileceğini öğrenirsin.
useState vs useReducer
Hangisini seçeceğin state'in karmaşıklığına bağlıdır. Tek bir sayı veya metin için useState yeter; birkaç ilişkili alan veya çok sayıda geçiş varsa useReducer temizdir.
useReducer mantığı tek yerde toplar; test ederken bileşene gerek kalmaz. useState ise daha az satır ve daha az kavram gerektirir.
İkisi de eşit derecede hızlıdır; seçim okunabilirliğe bağlıdır.
Geçiş tablosu
useReducer'ın gücü, geçişlerin bir tablo gibi okunabilmesidir. Her aksiyon türü yeni bir state üretir; bu, hata ayıklamayı kolaylaştırır.
useState'te mantık handler'ların içine dağılır; bir hatayı bulmak birden çok fonksiyona bakmayı gerektirir.
İleride Redux gibi kütüphaneler aynı reducer modelini genişletecek; temeli burada öğrenmek önemlidir.
Uygulama Çift yollu sayaç
Aşağıdaki iskeleti tamamla. reducer fonksiyonu yaz; switch(action.type) içinde case "up": return state + 1;, case "down": return state - 1; ve default: return state; olsun. Counter bileşeni yaz; useReducer'ı içe aktar, const [state, dispatch] = useReducer(reducer, 0); tanımla. <button onClick={() => dispatch({type: "up"})}>{state}</button> döndür. Dışa aktar.
Başlangıç kodu
import { useReducer } from "react";
// reducer ve Counter bileşenini buraya tanımlaÖrnek çözüm
import { useReducer } from "react";
function reducer(state, action) {
switch (action.type) {
case "up": return state + 1;
case "down": return state - 1;
default: return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, 0);
return <button onClick={() => dispatch({ type: "up" })}>{state}</button>;
}
export default Counter;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Birkaç ilişkili alan ve çok geçiş varsa en iyi seçim?
useReducer collects logic in one place.- useReducer Doğru cevap
- useRef
- useState
- prop
Açıklama: useReducer karmaşık geçişleri toplar.
2 useState vs useReducer: eksik parçayı tamamla
const [count, setCount] = ____(0);const [count, setCount] = useState(0);Açıklama: Basit sayaç için useState yeter.
3 useState vs useReducer: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
useState |
Basit state |
useReducer |
Karmaşık state |
dispatch |
Aksiyon gönderir |
reducer |
Saf fonksiyon |