Selector ve yeniden render

Selector Nasıl Karşılaştırılır

Store her değiştiğinde Zustand, component'teki selector'ı yeniden çalıştırır ve sonucu bir öncekiyle Object.is ile karşılaştırır. Sonuç farklıysa component render olur, aynıysa olmaz.¹²

const count = useCartStore((state) => state.items.length);

Burada sonuç bir sayıdır. Sepet kapanıp açılsa da sayı aynı kaldığı sürece component render olmaz. Selector'ın döndürdüğü değer ne kadar küçükse component o kadar az render olur.

Bütün Store'a Abone Olmak

Selector vermezseniz hook bütün state'i döndürür. Bu, store'daki her değişiklikte render demektir:³

// ❌ Yalnızca items'ı kullanıyor ama isOpen değişince de render olur
const { items } = useCartStore();

TkDodo bu yüzden selector'ları zorunlu sayar: store'da tek bir değer olsa bile bir selector yazın.³

Atomik Selector

Her değer için ayrı bir selector yazmak en basit ve en güvenli yoldur:³

const items = useCartStore((state) => state.items);
const isOpen = useCartStore((state) => state.isOpen);

Her satır kendi değerine abone olur. TkDodo'nun tercihi budur: bir component iki değere ihtiyaç duyuyorsa iki selector kullanır.³

Nesne Döndüren Selector

Birden fazla değeri tek seferde almak için nesne döndürmek caziptir. Ama selector her çalıştığında yeni bir nesne üretir; Object.is iki nesneyi hiçbir zaman eşit saymaz.¹

// ❌ Her seferinde yeni nesne
const { items, isOpen } = useCartStore((state) => ({
  items: state.items,
  isOpen: state.isOpen,
}));

v4'te bu kod yalnızca gereksiz render'a yol açıyordu. v5 React'in davranışına uyduğu için sonuç daha ağırdır: React, değerin her okumada değiştiğini görür ve sayfa "Maximum update depth exceeded" hatasıyla durur.⁴ Konsolda öncesinde "The result of getSnapshot should be cached" uyarısı çıkar.

Çözüm useShallow'dur. Selector'ı sarar ve sonucu sığ karşılaştırır: nesnenin ya da dizinin her elemanı Object.is ile aynıysa önceki referansı döndürür.²⁴

import { useShallow } from "zustand/react/shallow";

const { items, isOpen } = useCartStore(
  useShallow((state) => ({ items: state.items, isOpen: state.isOpen })),
);

// Dizi döndürmek de aynı
const [items, isOpen] = useCartStore(useShallow((state) => [state.items, state.isOpen]));

useShallow hem zustand/react/shallow'dan hem zustand/shallow'dan import edilebilir.⁴

Türetilmiş Değer

Hesaplanabilen bir değeri store'a ayrıca yazmayın; selector'da hesaplayın.⁵ Sonuç bir sayı ya da metinse ek bir şey gerekmez:

const total = useCartStore((state) =>
  state.items.reduce((sum, item) => sum + item.price * item.quantity, 0),
);

Sonuç yeni bir dizi ise (filter, map, Object.keys) her seferinde yeni referans üretir. useShallow ile sarın; dizi elemanları aynı kaldıkça component render olmaz:¹

const ids = useCartStore(useShallow((state) => state.items.map((item) => item.id)));

Bu kalıp listeler için kullanışlıdır. Liste component'i yalnızca id'leri okur; her satır kendi kaydını id ile seçer. Bir ürünün adedi değişince yalnızca o satır render olur.

Yalnızca Custom Hook Export Edin

TkDodo'nun bir numaralı önerisi: store hook'unu dışarı açmayın, her değer için bir custom hook export edin.³

// Export edilmiyor: kimse bütün store'a abone olamaz
const useCartStore = create<CartState>()((set) => ({
  /* ... */
}));

export const useCartItems = () => useCartStore((state) => state.items);
export const useCartCount = () =>
  useCartStore((state) => state.items.reduce((sum, item) => sum + item.quantity, 0));
export const useIsCartOpen = () => useCartStore((state) => state.isOpen);

Kullanan component selector yazmak zorunda kalmaz, yanlışlıkla bütün store'a abone olamaz, store'un iç yapısı değişince yalnızca bu dosya değişir. Action'ları dışarı açmanın yolu Action ve güncelleme dersinde.

Kendin Dene

• Üç component yazın: biri bütün store'u, biri atomik selector'ı, biri useShallow ile nesne okusun. Her birine console.log("render") koyup store'da ilgisiz bir alanı değiştirin.

• useShallow'u kaldırıp nesne döndüren selector'ı çalıştırın. Konsolda hangi uyarı ve hata çıkıyor?

• Sepet listesini önce items'ı okuyarak, sonra yalnızca id'leri okuyup satırlara böldükten sonra render edin. Bir ürünün adedini değiştirince kaç satır render oluyor?

Detaylı Öğrenmek İçin

• Yazı: TkDodo, "Working with Zustand"; custom hook export etmek, atomik selector ve action'ları ayırmak.³

• Resmi doküman: "Prevent rerenders with useShallow"; türetilmiş dizide useShallow örneği.¹

• Resmi doküman: "How to Migrate to v5 from v4"; kararlı selector çıktısı şartı ve sonsuz döngü örnekleri.⁴