useReducer vs useState

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.

Örnek çözümü göster

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>
    </>
  );
}

Kendini test et

Doğru hook'u seç

const [count, setCount] = ____(0);

Cevabı göster

const [count, setCount] = useState(0);

Kavramı rolüne eşle

useState

Tek değerlik state
useReducer

Karmaşık state
dispatch

Action gönderir
reducer

State'i hesaplar
Hangi senaryo useReducer için uygundur?
```
useReducer(reducer, initialState);
```
- Tek bir sayaç
- Aç/kapa bayrağı
- Bir metin
- Alışveriş sepeti
Cevabı göster

Alışveriş sepeti — Alışveriş sepeti useReducer için uygundur.

Sıradaki ders: Özet - useReducer

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler