useReducer vs useState
- React Native kursu
- Orta seviye
- Ders 28/116
- 5 dk
useReducer ve useState farkını öğrenirsin.
useReducer vs useState
useReducer ve useState state yöneten iki hook'tur. useState basit, tek değerlik state içindir; useReducer ise karmaşık, ilişkili state içindir. İkisi de state günceller; ama yolları farklıdır.
useState'te güncelleme doğrudan fonksiyonla yapılır: setCount(count + 1). useReducer'da ise bir action gönderilir, reducer yeni state'i hesaplar. Basit bir sayaç için useState yeterlidir; form, sepet veya oyun gibi birden çok alana sahip state için useReducer daha uygundur. Karar verirken state'in karmaşıklığına ve geçiş sayısına bak.
Karar verme
Hangi hook'u seçeceğine karar verirken iki soru sor. Birincisi: state tek bir değer mi, yoksa birbiriyle ilişkili birden çok alan mı? İkincisi: state geçişleri basit midir, yoksa karmaşık iş mantığı mı gerektiriyor?
Tek değer ve basit geçişler için useState uygundur. Birden çok ilişkili alan veya karmaşık geçişler için useReducer daha iyi bir seçimdir. Örneğin bir alışveriş sepeti: ürün ekleme, çıkarma, miktar güncelleme, kupon uygulama gibi birden çok işlem var. Bunların hepsini setCart ile yönetmek karışık olur; useReducer ile her işlem bir action olur ve yönetim kolaylaşır.
Uygulama Basit sayaç (useState)
Bir Counter bileşeni yaz. useState ile count tut (ilk değer 0). Bir butona basıldığında setCount(count + 1) çağrılsın. Bileşen <Text>{count}</Text> döndürsün.
Başlangıç kodu
// useState'i içe aktar
// Text ve Button'ı react-native'den içe aktar
function Counter() {
// count state'ini useState ile başlat (ilk değer 0)
// Butona basınca sayıyı bir artır
return <Text>Sayaç</Text>;
}Örnek çözüm
import { useState } from "react";
import { Button, Text } from "react-native";
function Counter() {
const [count, setCount] = useState(0);
return (
<>
<Button onPress={() => setCount(count + 1)} title="Artır" />
<Text>{count}</Text>
</>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Doğru hook'u seç
const [count, setCount] = ____(0);const [count, setCount] = useState(0);Açıklama: Basit sayaç için useState yeterlidir.
2 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
useState |
Tek değerlik state |
useReducer |
Karmaşık state |
dispatch |
Action gönderir |
reducer |
State'i hesaplar |
3 Hangi senaryo useReducer için uygundur?
useReducer(reducer, initialState);- Tek bir sayaç
- Aç/kapa bayrağı
- Bir metin
- Alışveriş sepeti Doğru cevap
Açıklama: Alışveriş sepeti useReducer için uygundur.