State Nerede Yaşamalı? — Bileşen, Üst Bileşen, Context, Cache, URL

Evinde her şeyi salona yığdığını düşün: diş fırçası, kumanda, süt, ev adresinin yazılı olduğu kâğıt. Her şeyi bulmak kolay gibi görünür, çünkü hepsi tek yerde. Ama salon kısa sürede kimsenin oturamadığı bir depoya döner.

Kim kullanıyor?

Yalnızca bir bileşen kullanıyorsa state onun içinde yaşar. Havale formunda yazılan tutar böyledir: başka hiçbir ekranı ilgilendirmez.

İki kardeş bileşen aynı değeri paylaşıyorsa, state ortak üst bileşene taşınır: lifting state up?Terimin tanımını açlifting state upİki kardeş bileşenin paylaştığı state'i ortak üst bileşenlerine taşımak. Üst bileşen değeri props ile ikisine de verir; ikisi hep aynı şeyi gösterir.Sözlükte gör →. Üst bileşen değeri props ile ikisine de verir ve ikisi hep aynı şeyi gösterir.

Global neden her şey değil?

Context?Terimin tanımını açcontextReact'te bir değeri props zinciri olmadan derindeki bileşenlere ulaştıran yol. Değer değişince onu okuyan her bileşen yeniden çizilir.Sözlükte gör →, uygulamanın her yerinden okunan ve az değişen değerler içindir: tema, dil, oturumdaki kullanıcı. Sık değişen bir değeri oraya koyarsan, okuyan her bileşen her değişiklikte yeniden çizilir.

Sunucudan gelen bakiye ise başka bir türdür: sunucu state’i?Terimin tanımını açsunucu state'iAsıl sahibi sunucu olan veri: bakiye, hareketler. Ekranda tutulan hâli bir önbellektir; başka bir yerde değişince bayatlar ve yeniden istenmelidir.Sözlükte gör →. Onun asıl sahibi sunucudur; ekrandaki elle tutulan kopya, başka bir sekmede havale yapılınca bayatlar. Bir query cache onu yeniden ister.

Paylaşılması gereken bir filtre ise URL’de yaşar, böylece yenilemede ve linkte kalır.

Kendin gör

1. Varsayılanla oynat. Her şey global context’te: hiçbir senaryo sorunsuz geçmedi.
2. Tutarı “Bileşenin kendi state’i”ne al. 72 yeniden çizim 6’ya indi.
3. Seçili hesabı önce “Bileşenin kendi state’i”ne, sonra “Ortak üst bileşen”e al. İlkinde üst bar ile form ayrıştı, ikincisinde aynı kaldı.
4. Filtreyi “URL”ye, bakiyeyi “Sunucu cache’i”ne al. Dört senaryo da sorunsuz.

Tuzaklar

Sunucu verisini kopyalamak. Bakiyeyi bir kez çekip useState’e koymak, onu sunucudan koparır. Sunucu verisini bir query cache’e bırak ve bir değişiklikten sonra o kaydı geçersiz kıl.

Türetilebilen değeri state’te tutmak. Hareketlerin toplamı, hareket listesinden hesaplanabilir. Ayrı bir state’te tutarsan ikisi bir gün uyuşmaz; her çizimde hesapla.

Prop’ları on kat aşağı taşımak. Bir değeri ona hiç bakmayan beş bileşenin içinden geçirmek de bir sinyaldir. Değer gerçekten genelse context’e, değilse onu kullanan bileşene daha yakın bir yere taşı.

Aşağıdaki örnek bir bankacılık uygulamasından: formda yerel tutar, ortak üstte seçili hesap, URL’de filtre ve query cache’te bakiye.

1
export function TransferForm({ accountId }: { accountId: string }) {
2
  const [amount, setAmount] = useState('');   // only this form cares about the typed amount
3
  const queryClient = useQueryClient();
4

5
  async function submit() {
6
    await sendTransfer({ from: accountId, amount });
7
    // The balance belongs to the server: mark it stale instead of editing a copy.
8
    await queryClient.invalidateQueries({ queryKey: ['balance', accountId] });
9
    setAmount('');
10
  }
11

12
  return (
13
    <form onSubmit={(e) => { e.preventDefault(); void submit(); }}>
14
      <input inputMode="decimal" value={amount} onChange={(e) => setAmount(e.target.value)} aria-label="Tutar" />
15
      <button type="submit">Gönder</button>
16
    </form>
17
  );
18
}

1
export function AccountsLayout({ accounts }: { accounts: Account[] }) {
2
  // Two siblings need the same selection: it lives in their nearest common parent.
3
  const [selectedId, setSelectedId] = useState(accounts[0]!.id);
4

5
  return (
6
    <>
7
      <AccountSwitcher accounts={accounts} selectedId={selectedId} onSelect={setSelectedId} />
8
      <BalanceCard accountId={selectedId} />
9
      <TransferForm accountId={selectedId} />
10
    </>
11
  );
12
}

1
export function TransactionsPage({ accountId }: { accountId: string }) {
2
  // The filter is part of the address: it survives a refresh and travels with a link.
3
  const [params, setParams] = useSearchParams();
4
  const direction = params.get('yon') ?? 'hepsi';
5

6
  return (
7
    <>
8
      <select value={direction} onChange={(e) => setParams({ yon: e.target.value })} aria-label="Yön">
9
        <option value="hepsi">Hepsi</option>
10
        <option value="giden">Giden</option>
11
        <option value="gelen">Gelen</option>
12
      </select>
13
      <TransactionList accountId={accountId} direction={direction} />
14
    </>
15
  );
16
}

1
export function BalanceCard({ accountId }: { accountId: string }) {
2
  // Server state: the cache owns it, refetches when the tab regains focus, and shares it.
3
  const { data, isPending } = useQuery({
4
    queryKey: ['balance', accountId],
5
    queryFn: () => fetchBalance(accountId),
6
  });
7

8
  if (isPending) return <p>Bakiye yükleniyor…</p>;
9
  return <p>Bakiye: {formatTry(data!.amount)}</p>;
10
}

Kendini sına