React Fiber ve concurrent rendering nedir? useTransition ne işe yarar?

Fiber, React 16 ile gelen yeni uzlaştırma (reconciliation) motorudur. Render işini küçük birimlere böler, böylece React işi duraklatabilir, önceliklendirebilir ve iptal edebilir.

Concurrent rendering (React 18) bu yeteneği kullanır: acil güncellemeler (yazma, tıklama) acil olmayanlardan (büyük liste filtreleme) önce işlenir, arayüz donmaz.

function Arama({ urunler }) {
  const [metin, setMetin] = useState("");
  const [filtre, setFiltre] = useState("");
  const [isPending, startTransition] = useTransition();

  const degis = e => {
    setMetin(e.target.value);                     // acil: input hemen güncellenir
    startTransition(() => setFiltre(e.target.value)); // acil değil: kesilebilir
  };

  const sonuc = useMemo(() => urunler.filter(u => u.ad.includes(filtre)), [urunler, filtre]);
  return (
    <>
      <input value={metin} onChange={degis} />
      {isPending && <span>Filtreleniyor…</span>}
      <Liste veri={sonuc} />
    </>
  );
}

Benzer amaçla useDeferredValue, bir değerin gecikmeli kopyasını üretir.