Strict Mode — nima uchun kerak, double render sababi

~10 daq · React · Ilg'or mavzular

Muammodan boshlaylik

Siz useEffect ga console.log qo'ydingiz:

useEffect(() => {
  console.log('Komponent chiqdi');
  fetch('/api/statistika');
}, []);

Konsolda:

Komponent chiqdi
Komponent chiqdi

Network bo'limida — ikkita so'rov. Bo'sh bog'liqliklar massivi bilan effekt bir marta ishlashi kerak edi-ku! Internetda qidirasiz va "yechim" topasiz: main.jsx dan <StrictMode> ni o'chirish. Ikki marta chiqish yo'qoladi.

To'xtang. Bu — xato tuzatish emas, xato haqidagi ogohlantirishni o'chirish.

StrictMode nima

// main.jsx
import { StrictMode } from 'react';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

StrictMode — faqat development rejimida ishlaydigan tekshiruv vositasi. U ichidagi komponentlarni qo'shimcha "stress testdan" o'tkazadi va yashirin xatolarni yuzaga chiqaradi.

[!INFO] Production build da StrictMode hech narsa qilmaydi: ikki marta render yo'q, ikki marta effekt yo'q, hech qanday qo'shimcha xarajat yo'q. Vite bilan yaratilgan loyihalarda u standart holatda yoqilgan.

Nima qiladi

1. Komponentni ikki marta render qiladi

function Royxat({ elementlar }) {
  elementlar.push('yangi');          // ❌ props ni o'zgartirish — nosof
  return <ul>{elementlar.map(...)}</ul>;
}

Bitta render da bu xato sezilmaydi. StrictMode komponent funksiyasini ikki marta chaqiradi — 'yangi' ikki marta qo'shiladi va xato ekranda darhol ko'rinadi.

Qoida (67-dars): komponent — sof funksiya. Bir xil props va state — bir xil natija; tashqi narsalarni o'zgartirmaydi. Ikki marta chaqirish bu qoidani tekshiradi: sof funksiya ikki marta chaqirilsa ham natija bir xil.

Ikki marta chaqiriladi: komponent tanasi, useState/useMemo/useReducer ga berilgan funksiyalar, setState(fn) dagi funksiyalar.

[!TIP] Ikkinchi chaqiruvdagi console.log lar React DevTools da xiralashtirilgan holda ko'rsatiladi. Ularni butunlay yashirish uchun: DevTools → ⚙ → "Hide logs during second render in Strict Mode".

2. Effektlarni ikki marta ishga tushiradi

mount → effekt ishladi
      → cleanup ishladi       ← StrictMode simulyatsiyasi
      → effekt yana ishladi

Darsning boshidagi ikki marta chiqish — aynan shu. StrictMode komponentni chiqarib, olib tashlab, qaytadan chiqargandek qiladi. Nima uchun? Haqiqiy ilovada bu doim sodir bo'ladi:

  • Foydalanuvchi sahifadan chiqib, orqaga qaytadi
  • Tab lar almashadi, komponent yashirinadi va qaytadi
  • Development da Fast Refresh (HMR) komponentni qayta yuklaydi
  • React kelajakda holatni saqlab, komponentni yashirib-ko'rsatish (<Activity>) imkoniyatidan foydalanadi

Agar effekt cleanup siz bo'lsa, bularning har birida xato yuzaga chiqadi. StrictMode uni darhol, development da ko'rsatadi.

3. Eskirgan API lar haqida ogohlantiradi

Eski lifecycle metodlari, findDOMNode, eski Context API kabi narsalar ishlatilsa — konsolda ogohlantirish.

Effektlarni to'g'rilash

Ikki marta ishlash muammo bo'lsa — demak effektda cleanup yo'q. Yechim — cleanup qo'shish:

Obuna — ikki marta obuna

// ❌ ikki marta ishlaydi → ikkita listener, biri hech qachon olib tashlanmaydi
useEffect(() => {
  window.addEventListener('resize', handleResize);
}, []);

// ✅
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

Taymer

useEffect(() => {
  const id = setInterval(tik, 1000);
  return () => clearInterval(id);
}, []);

Ulanish

useEffect(() => {
  const ulanish = chatGaUlan(xonaId);
  return () => ulanish.uzish();
}, [xonaId]);

Ma'lumot olish

useEffect(() => {
  const controller = new AbortController();
  fetch(url, { signal: controller.signal }).then(...);
  return () => controller.abort();              // 50-dars
}, [url]);

Network da birinchi so'rov (canceled) ko'rinadi — bu to'g'ri xatti-harakat. Yoki TanStack Query ishlating — u deduplikatsiya qiladi va bitta so'rov yuboradi.

Bir martalik amal — analitika

// Analitika "sahifa ko'rildi" — ikki marta yuborilsa?
useEffect(() => {
  analytics.sahifaKorildi(sahifa);
}, [sahifa]);

Development da ikki marta yuboriladi — bu muammo emas: production da bir marta, development analitikasi esa odatda o'chirilgan. Ilova ishga tushganda bir marta bajarilishi kerak bo'lgan kodni (masalan, global sozlash) komponentdan tashqarida, modul darajasida yozing:

// main.jsx
if (typeof window !== 'undefined') {
  analytics.boshla();          // bir marta, komponentlardan tashqarida
}

[!WARNING] "Ikki marta ishlamasin" deb useRef bayrog'i bilan effektni "himoyalash" — if (ishladi.current) return; ishladi.current = true; — keng tarqalgan, lekin noto'g'ri yondashuv. U xatoni yashiradi: StrictMode ko'rsatgan muammo (cleanup yo'qligi) production da baribir sahifalar almashganda paydo bo'ladi. To'g'ri yechim — cleanup.

Asosiy savol

StrictMode effektni ikki marta ishga tushirganda o'zingizga savol bering:

"Foydalanuvchi bu sahifadan chiqib, darhol qaytsa — hammasi to'g'ri ishlaydimi?"

Javob "ha" bo'lsa — StrictMode dagi ikki marta ishlash ham muammo emas. Javob "yo'q" bo'lsa — StrictMode sizga production dagi kelajakdagi xatoni ko'rsatdi.

StrictMode ni o'chirish kerakmi?

Deyarli hech qachon. U faqat development da ishlaydi va production ga ta'sir qilmaydi.

Istisno — eski kutubxona StrictMode bilan mos kelmasa va uni tuzatib bo'lmasa. Unda butun ilova uchun emas, faqat o'sha qism uchun:

<StrictMode>
  <Header />
  <Main />
</StrictMode>
<EskiKutubxonaVidjeti />      {/* StrictMode dan tashqarida */}

Nima uchun shunday?

Nima uchun React xatolarni topish uchun komponentlarni ataylab ikki marta ishga tushiradi — boshqa usul yo'qmi?

Chunki bu xatolar statik tahlil bilan topilmaydi: kod sintaktik jihatdan to'g'ri, ESLint jim, TypeScript mamnun. Xato faqat ma'lum ketma-ketlikda — komponent qayta chiqqanda, render qayta boshlanganda — namoyon bo'ladi. Production da bu ketma-ketlik kamdan-kam va tasodifiy sodir bo'ladi: bir foydalanuvchida, haftada bir marta, qayta hosil qilib bo'lmaydigan holda. StrictMode bu nodir holatni har safar, darhol sodir qiladi — xato sizning ko'z o'ngingizda, kod yozayotganda paydo bo'ladi. Bu "fuzz testing" g'oyasiga o'xshaydi: tizimni noqulay sharoitlarga ataylab qo'yib, uning zaif joylarini oldindan topish.

Xulosa

Eslab qoling:

  • <StrictMode> — faqat development dagi tekshiruv; production ga ta'sir yo'q
  • Komponentlarni ikki marta render qiladi — nosof render larni topish uchun
  • Effektlarni mount → cleanup → mount qiladi — cleanup yo'qligini topish uchun
  • Ikki marta so'rov, ikki marta listener — cleanup qo'shing (abort, removeEventListener, clearInterval)
  • useRef bayrog'i bilan "himoya" — xatoni yashiradi, tuzatmaydi
  • Asosiy savol: "Chiqib darhol qaytsa — to'g'ri ishlaydimi?"
  • StrictMode ni o'chirmang

Keyingi bo'lim

13-bo'lim: Ekotizim va Amaliyot — Axios interceptor, i18n, PWA, loyiha arxitekturasi va deploy.