React yeniden render zinciri: bir tıklamanın tüm ağacı yeniden render etmesi

Ne oluyor

React'te bir state güncellemesi bileşeni ve varsayılan olarak tüm çocuklarını yeniden render eder. State ağacın üstünde yaşıyorsa (bir context, sayfa düzeyinde bir store), tek bir tuş veya tıklama yüzlerce bileşeni yeniden render edebilir — çoğu öncekiyle tam olarak aynı şeyi gösterir.

Tek bir render ucuzdur; tek bir işleyicide binlercesi değildir. İş, INP'nin processing time aşamasına düşer.

Nasıl tanınır

• React DevTools Profiler geniş alev grafikleri gösterir: bileşenler props'ları gözle görülür şekilde değişmeden yeniden render olur.
• Kontrollü bir input'a yazmak takılır; her tuş büyük listeleri veya tabloları yeniden render eder.
• INP'de processing time baskındır ve DevTools Performance'taki yığın React internals ile doludur.

Nasıl düzeltilir

• State'i aşağı taşı: onu sayfa düzeyinde bir bileşen veya context yerine ona ihtiyaç duyan en küçük bileşende tut.
• Pahalı alt ağaçları React.memo ile sar ve onlara geçtiğin props'ları useCallback/useMemo ile sabitle — her render'da yeni bir callback oluşturulursa memo işe yaramaz.
• Acil olmayan güncellemeleri (yazarken bir listeyi filtrelemek) useTransition ile işaretle, böylece acil render (input'un kendisi) önce boyanır.

Sorun

const Page = () => {
  const [query, setQuery] = useState("")
  // every keystroke re-renders Page → Header, Sidebar, BigTable, Footer
  return <>
    <SearchInput value={query} onChange={setQuery} />
    <BigTable rows={filterRows(rows, query)} />
  </>
}

Çözüm

const BigTable = React.memo(({ rows }) => /* ... */)

const Page = () => {
  const [query, setQuery] = useState("")
  const [isPending, startTransition] = useTransition()
  const rows = useMemo(() => filterRows(allRows, query), [query])
  const onChange = (q) =>
    startTransition(() => setQuery(q))  // input paints first, table follows
  return <>
    <SearchInput onChange={onChange} />
    <BigTable rows={rows} />
  </>
}