React unumdorligini oshirish: memo, useMemo va qayta renderlar

Qisqa javob

Qayta render o‘z-o‘zidan muammo emas: React tez-tez qayta chizishga mo‘ljallangan. Muammo — qimmat komponentlar keraksiz qayta chizilganda va buni foydalanuvchi sezganda. Harakatlar tartibi doim bir xil: o‘lchash → sababni topish → tuzilmani tuzatish → nuqtaviy memoizatsiya.

Komponent nega qayta chiziladi

Komponent qayta render bo‘ladi, agar:

• uning holati o‘zgarsa;
• ota komponent qayta chizilsa (props bir xil bo‘lsa ham);
• u o‘qiydigan kontekst qiymati o‘zgarsa.

Ikkinchi band — ortiqcha renderlarning asosiy manbai. Daraxt tepasida holat saqlaydigan katta komponent o‘zidan pastdagi hamma narsani ham qayta chizadi.

Ortiqcha qayta renderlarni qanday topish

1. React Developer Tools ni o‘rnating va Profiler vkladkasini oching.
2. Sozlamalarda har bir komponent nega render bo‘lganini yozib borishni yoqing.
3. Sekin ishlayotgan harakatni yozib oling: maydonga matn kiritish, ro‘yxatni ochish, filtrni almashtirish.
4. Flamegraph’ni o‘rganing: qaysi komponentlar render bo‘ldi, qancha vaqt oldi va nima uchun.

Production yig‘masida tekshiring, kerak bo‘lsa brauzer DevTools’da CPU’ni sekinlashtiring: ishlab chiqish rejimida React sekinroq ishlaydi va manzara buziladi.

Avval tuzilma, keyin memoizatsiya

Ko‘p muammolar memo siz hal bo‘ladi:

• Holatni pastga tushiring. Agar qidiruv maydoni holatni o‘zgartirsa, uni butun sahifada emas, kichik SearchInput komponentida saqlang.
• Og‘ir qismlarni children orqali uzating. Tashqarida yaratilib, children sifatida uzatilgan elementlar o‘ram holati o‘zgarganda qayta chizilmaydi.
• Kontekstlarni ajrating. Tez-tez o‘zgaradigan ma’lumotlar kam o‘zgaradiganlar bilan bitta kontekstda turmasligi kerak.
• Komponent ichida komponent yaratmang. Bunday komponent har renderda qayta yaratiladi va holatini yo‘qotadi.

memo, useMemo va useCallback

const Row = memo(function Row({ item, onSelect }) {
  return <li onClick={() => onSelect(item.id)}>{item.name}</li>;
});

function List({ items }) {
  const [selected, setSelected] = useState(null);
  const handleSelect = useCallback((id) => setSelected(id), []);
  return items.map((item) => (
    <Row key={item.id} item={item} onSelect={handleSelect} />
  ));
}

useCallback bo‘lmasa, handleSelect har renderda qayta yaratilardi va Row dagi memo ishlamasdi.

Memoizatsiya qachon zarar qiladi

• Props’ni taqqoslash ham vaqt oladi. Yengil komponentlar uchun bu renderning o‘zidan qimmatroq bo‘lishi mumkin.
• Kod murakkablashadi, bog‘liqliklar massivida xato qilish xavfi oshadi.
• Memoizatsiya sezdirmasdan buziladi: yangi style={{...}} obyekti yoki strelkali funksiya uzatish kifoya — va memo ishlamay qoladi.

Memoizatsiyani faqat Profiler haqiqiy muammoni ko‘rsatgan joyga qo‘shing.

Uzun ro‘yxatlarni virtualizatsiya qilish

Agar ekranda minglab qatorlar bo‘lsa, muammo qayta renderlarda emas, DOM tugunlari sonida. Virtualizatsiya faqat ko‘rinib turgan elementlarni va ularning atrofidagi kichik zaxirani chizadi. Buning uchun TanStack Virtual yoki react-window kabi kutubxonalar bor. Muqobil — sahifalash yoki aylantirish davomida yuklash.

React Compiler

React Compiler — React jamoasining yig‘ish vositasi bo‘lib, u komponentlar va qiymatlarni avtomatik memoizatsiya qiladi. U qo‘lda yoziladigan memo, useMemo va useCallback ning katta qismidan xalos qiladi, lekin kod React qoidalariga rioya qilishini talab qiladi: toza komponentlar, props va holatni mutatsiya qilmaslik. Ulashdan oldin React versiyangiz va freymvorkingiz bilan mosligini rasmiy hujjatlarda tekshiring.

Sekinlikning boshqa tez-tez uchraydigan sabablari

• Og‘ir bandllar — kodni bo‘lish va lazy dan foydalaning.
• Har bir belgi kiritilganda sinxron hisoblashlar — useDeferredValue va useTransition yordam beradi.
• Siqilmagan katta rasmlar va joylashuvni qayta hisoblashga olib keladigan animatsiyalar.