React StrictMode chuqur: ikki marta chizish, effekt va ref sinovi, eskirgan API ogohlantirishlari

Qisqacha: <StrictMode> — faqat dev rejimda ishlaydigan "stress-test". U uch narsani qiladi. Birinchisi: render paytida chaqiriladigan hamma funksiyani ikki marta chaqiradi — komponent tanasi, useState/useReducer boshlang'ich funksiyasi, useMemo callback'i, updater funksiya. Toza bo'lmagan kod (mutatsiya, tashqi o'zgaruvchi) shunda fosh bo'ladi. Ikkinchisi: ekranga qo'yilgandan keyin effektlar va ref callback'larni setup → cleanup → setup qiladi — cleanup'siz kod fosh bo'ladi. Uchinchisi: eskirgan API'lar (UNSAFE_componentWillMount kabi) haqida ogohlantiradi. Production build'da StrictMode hech narsa qilmaydi — tezlikka ham, xulqqa ham ta'siri yo'q.

Bu darsda

• StrictMode qaysi funksiyalarni ikki marta chaqirishini to'liq ro'yxat bilan bilasiz va konsolda ko'rasiz.
• Updater funksiyadagi mutatsiyani StrictMode qanday fosh qilishini jonli ko'rasiz.
• Effekt va ref callback sinovini <Activity> va Suspense bilan bog'laysiz — nega React bunga tayyorlaydi.
• Eskirgan API ogohlantirishini o'qiysiz va StrictMode'ni qayerga qo'yishni tanlaysiz.
• vazifalar dev serverida StrictMode nimani ko'rsatganini haqiqiy o'lchovda o'qiysiz.

Oldin bilishingiz kerak: Pure komponentlar, Effekt hayot sikli va StrictMode, useRef II: ref callback, Activity.

1. Nega bu kerak?

StrictMode'ni uch marta uchratdingiz. Pure komponentlar da — komponent ikki marta chaqirildi va guest sanog'i buzildi. Effekt hayot sikli da — effekt ulandi → uzildi → ulandi qildi. useRef II da — ref callback ham shunday. Har safar bitta tomonini ko'rdik. Bugun — butun manzara: StrictMode nimani, nega va qachon qiladi.

Sardor yangi loyihada main.tsx ni ochdi va <StrictMode> ni ko'rdi. Konsolda har log ikki marta. "Bu ortiqcha, olib tashlayman" — dedi u. Bir hafta o'tib production'da g'alati xato chiqdi: savatga bitta taom qo'shilsa, ba'zan ikkita bo'lib qolardi. StrictMode bu xatoni birinchi kuni ko'rsatgan edi — konsoldagi "takror" aslida signal edi.

Hayotiy o'xshatish: avtomobil zavodidagi sinov poligoni. Yangi mashina chiqishdan oldin ataylab chuqurlardan o'tkaziladi, keskin tormoz qildiriladi, eshiklari yuz marta ochib-yopiladi. Haydovchi bunday sharoitga kamdan-kam tushadi. Lekin poligonda chiqqan nosozlik yo'lda chiqmaydi. Poligon do'konga yetib bormaydi — mijoz uni ko'rmaydi. StrictMode — React ilovasi uchun poligon: dev'da qiynaydi, production'da yo'q.

2. Ikki marta chaqiriladigan funksiyalar

2.1 To'liq ro'yxat

React render paytida sof bo'lishi kerak bo'lgan har funksiyani ikki marta chaqiradi:

import { StrictMode, useMemo, useReducer, useState } from "react";
import { createRoot } from "react-dom/client";

function App() {
  const [count] = useState(() => {
    console.log("useState boshlang'ich funksiyasi");
    return 1;
  });
  const total = useMemo(() => {
    console.log("useMemo callback'i");
    return count * 35000;
  }, [count]);
  const [state] = useReducer(
    (s) => s,
    0,
    (initial) => {
      console.log("useReducer boshlang'ich funksiyasi");
      return initial;
    },
  );
  console.log("komponent tanasi");
  return <p>{count} osh — {total + state} so'm</p>;
}

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

Konsolda:

useState boshlang'ich funksiyasi
useState boshlang'ich funksiyasi
useMemo callback'i
useMemo callback'i
useReducer boshlang'ich funksiyasi
useReducer boshlang'ich funksiyasi
komponent tanasi
komponent tanasi

Ekranda:

1 osh — 35000 so'm

Hammasi ikki marta, natija esa bitta. React ikkinchi chaqiruv natijasini olmaydi yoki ikkalasini solishtirmaydi — u faqat chaqiradi. Funksiya sof bo'lsa, ikki chaqiruv bir xil natija beradi va hech kim farqni sezmaydi. Sof bo'lmasa — farq ekranda yoki konsolda ko'rinadi.

O'ng ustundagilar render emas: React ularni o'zi "takrorlab" ko'rmaydi.

2.2 Konsoldagi takror

Brauzer konsolida ikkinchi chaqiruvning loglari xira (kulrang) ko'rinadi — React DevTools o'rnatilgan bo'lsa. DevTools sozlamalarida "Hide logs during second render in Strict Mode" belgisi bor: u ikkinchisini butunlay yashiradi. Saytdagi natija oynasida esa ikkalasi ham oddiy ko'rinadi. Takrordan cho'chimang — u kodning emas, poligonning ishi.

3. Updater'dagi mutatsiya

3.1 Sardorning savati

Sardorning production xatosi. U savatga qo'shishni updater bilan yozdi (State II), lekin avval eski massivni o'zgartirib qo'ydi:

import { StrictMode, useState } from "react";
import { createRoot } from "react-dom/client";

function Cart() {
  const [items, setItems] = useState([]);
  function add(dish) {
    setItems((prev) => {
      prev.push(dish); // ❌ eski state'ni o'zgartirdi
      return [...prev];
    });
  }
  return (
    <div>
      <button onClick={() => add("Osh")}>Osh</button>{" "}
      <button onClick={() => add("Manti")}>Manti</button>
      <p>Savatda: {items.join(", ")}</p>
    </div>
  );
}

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <Cart />
  </StrictMode>,
);

Ekranda:

Osh Manti
Savatda: Osh, Manti, Manti

Ikki taom bosildi — savatda uchta. StrictMode updater'ni ikki marta chaqirdi. Birinchi chaqiruv prev ga "Manti" ni qo'shib qo'ydi (mutatsiya). Ikkinchi chaqiruv o'sha, endi o'zgargan prev ni oldi va yana qo'shdi. Sof updater bo'lganda ([...prev, dish]) ikki chaqiruv bir xil natija berardi.

Birinchi bosishda takror ko'rinmadi — React ba'zan updater natijasini bosish paytida oldindan hisoblaydi va qayta chaqirmaydi. Lekin xato baribir chiqdi, uchinchi-to'rtinchi bosishda ham chiqaveradi.

3.2 Nega bu production'da ham xato

"StrictMode'siz updater bir marta chaqiriladi — demak production'da xato yo'q" degan fikr noto'g'ri. React o'zi ham updater'larni qayta chaqirishi mumkin. Masalan, transition to'xtatilib, render boshidan qilinganda. Yoki useOptimistic asosiy state o'zgarganda kutilayotgan amallarni qayta qo'llaganda. Shunday paytda Sardorning savati ikkilanadi — kamdan-kam, tasodifiy, tuzatish qiyin bo'lib. StrictMode bu "kamdan-kam"ni har safar qiladi.

Tuzatish — immutable yangilash:

setItems((prev) => [...prev, dish]); // ✅ prev o'zgarmaydi

Tekshirib ko'ring: useMemo(() => { order.total += 1000; return order.total; }, [order]) — StrictMode'da nima bo'ladi?

4. Effekt va ref sinovi

4.1 Qisqa takror

Komponent ekranga birinchi marta qo'yilganda StrictMode uni "olib tashlab, qaytadan qo'yadi" — faqat effektlar va ref'lar uchun. State va DOM saqlanadi:

import { StrictMode, useEffect } from "react";
import { createRoot } from "react-dom/client";

function KitchenScreen() {
  useEffect(() => {
    console.log("oshxona ekraniga ulandi");
    return () => console.log("oshxona ekranidan uzildi");
  }, []);
  return (
    <p
      ref={(el) => {
        console.log("ref:", el.tagName);
        return () => console.log("ref cleanup");
      }}
    >
      Oshxona: 3 buyurtma
    </p>
  );
}

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <KitchenScreen />
  </StrictMode>,
);

Konsolda:

ref: P
oshxona ekraniga ulandi
ref cleanup
oshxona ekranidan uzildi
ref: P
oshxona ekraniga ulandi

Ref callback ham, effekt ham: setup → cleanup → setup. Tartibga qarang: avval ref'lar, keyin effektlar. Cleanup'da ham — avval ref, keyin effekt. Bu React'ning commit tartibi: ref DOM element tayyor bo'lishi bilan, effekt — undan keyin.

4.2 Nega aynan "olib tashlab, qaytadan qo'yish"

Effekt hayot sikli darsida bu sinovni "kelajakdagi xatoni oldindan ko'rsatadi" degan edik. Endi o'sha kelajak keldi. React 19 ning ikki imkoniyati komponentni haqiqatan uzib, qayta ulaydi, unmount qilmasdan:

• <Activity> — yashirilganda effektlar cleanup qilinadi, ko'rsatilganda — qayta setup. State va DOM joyida. Aynan StrictMode sinovi!
• Suspense — allaqachon ko'rinib turgan kontent qayta to'xtasa (transition'siz), React uning layout effektlarini uzib, fallback'ni ko'rsatadi. Keyin qayta ulaydi.

StrictMode sinovidan o'tgan komponent bu imkoniyatlarda ham to'g'ri ishlaydi. O'tmagani — <Activity> ichida har ochilishda yangi ulanish qo'shadi. Ya'ni StrictMode — "kelajakdagi React'ga tayyormisiz?" degan sinov.

flowchart LR
  S["StrictMode sinovi: setup → cleanup → setup"] --> A["Activity: yashir → ko'rsat"]
  S --> U["Suspense: qayta to'xtash"]
  S --> R["Fast Refresh: kod saqlanganda"]
  A --> OK["Cleanup to'g'ri — hammasi ishlaydi"]
  U --> OK
  R --> OK

Diagrammadagi uchinchi yo'l — Fast Refresh: kodni saqlaganingizda Vite effektlarni qayta ishga tushiradi. Cleanup'siz effekt dev serverda ham ulanishlarni ko'paytiradi.

5. Eskirgan API ogohlantirishlari

5.1 UNSAFE_ lifecycle'lar

StrictMode'ning uchinchi vazifasi — eski, xavfli API'lar haqida ogohlantirish. React 19 da ularning ko'pi umuman olib tashlangan (string ref'lar, findDOMNode, eski Context API) — ular endi xato beradi, ogohlantirish emas (React versiyasini yangilash). Qolganlari — class komponentlardagi UNSAFE_ metodlar:

import { Component, StrictMode } from "react";
import { createRoot } from "react-dom/client";

class OldMenu extends Component {
  UNSAFE_componentWillMount() {
    console.log("componentWillMount ishladi");
  }
  render() {
    return <p>Eski menyu komponenti</p>;
  }
}

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <OldMenu />
  </StrictMode>,
);

Konsolda:

componentWillMount ishladi
Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://react.dev/link/unsafe-component-lifecycles for details.
* Move code with side effects to componentDidMount, and set initial state in the constructor.
Please update the following components: OldMenu

Tarjima: "UNSAFE_componentWillMount ni strict mode'da ishlatish tavsiya etilmaydi va kodingizda xato borligini bildirishi mumkin. Yon ta'sirli kodni componentDidMount ga ko'chiring, boshlang'ich state'ni esa konstruktorda bering. Quyidagi komponentlarni yangilang: OldMenu".

Nega "UNSAFE"? Bu metodlar render bosqichida ishlaydi va React ularni bir necha marta chaqirishi mumkin (concurrent rendering). Ichidagi so'rov yoki obuna — takrorlanadi. componentWillMount, componentWillReceiveProps, componentWillUpdate — uchalasi ham shunday. Class komponentlarni o'qishni keyingi darsda ko'ramiz — bu nomlar eski kodda uchraydi.

5.2 Keshlanmagan Promise

StrictMode bilan bog'liq yana bir dev tekshiruvi — use() darsida ko'rgan xabar: A component was suspended by an uncached promise. Komponent ikki marta chaqirilganda render ichida yaratilgan Promise ikki xil bo'ladi va React buni sezadi. Haqiqiy loyihada qanday ko'rinishi — «Vazifalar qadami» bo'limida.

6. StrictMode'ni qayerga qo'yish

6.1 Butun ilova — standart

Vite shabloni main.tsx da butun ilovani o'raydi (Birinchi React loyiha). Yangi loyiha uchun bu to'g'ri: hamma komponent birinchi kundan sinovdan o'tadi.

6.2 Qism — eski loyihada

Katta eski loyihaga StrictMode qo'shsangiz, konsol ogohlantirishlarga to'lib ketishi mumkin. Unda u bir qismga qo'yiladi va asta-sekin kengaytiriladi:

<Header />                {/* eski — hali tekshirilmagan */}
<StrictMode>
  <NewCheckout />         {/* yangi — sinovda */}
</StrictMode>

StrictMode — oddiy komponent, DOM'da hech narsa chizmaydi. Uni daraxtning istalgan joyiga qo'yish mumkin, ichidagi hamma komponentga ta'sir qiladi.

6.3 Production — ta'siri yo'q

npm run build dan keyin StrictMode bo'sh qobiq: ikki marta chaqirish ham, effekt sinovi ham yo'q. Buni Birinchi React loyiha darsida o'lchagan edik: dev'da 4 qator, preview da 2 qator. Shuning uchun uni production uchun "o'chirish" kerak emas va foyda ham bermaydi.

Tekshirib ko'ring: Analitika effekti dev'da "sahifa ochildi" hodisasini ikki marta yuboryapti. StrictMode'ni olib tashlash kerakmi?

7. Vazifalar qadami: dev serverda StrictMode (o'lchov)

Bu dars — kanonda alohida commit emas, o'lchov. vazifalar ning main.tsx ida StrictMode 17-qismdan beri bor:

// StrictMode — faqat dev'da: render va effektni ikki marta sinaydi

Kanonni qurishda dev server (npm run dev, StrictMode yoqilgan) haqiqiy Chrome'da ochildi va so'rovlar yozib olindi (natijalar/13-dev-strictmode.txt, holat 12):

  BEKOR GET /api/mashq/vazifalar/e2e661ad-8385-493c-935a-dd1948f20a0e — net::ERR_ABORTED
  200 GET /api/mashq/vazifalar/e2e661ad-8385-493c-935a-dd1948f20a0e
  200 PUT /api/mashq/vazifalar/e2e661ad-8385-493c-935a-dd1948f20a0e

Birinchi GET — bekor qilingan. StrictMode effektni ishga tushirdi (GET ketdi), keyin cleanup qildi — AbortController so'rovni to'xtatdi (net::ERR_ABORTED). Keyin effekt qayta ishga tushdi — ikkinchi GET muvaffaqiyatli. Bu — cleanup to'g'ri yozilganining isboti: bekor qilinmaganda ikki javob poyga qilib, eskisi yangisini bosib ketishi mumkin edi. Panel ham ochildi, CSP buzilishi — 0.

Ikkinchi tajriba — ataylab buzilgan kod. Statistika Promise'ining keshi (use() dagi WeakMap) vaqtincha olib tashlandi (13-dev-keshsiz.txt):

  error: A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.

Dev rejim xatoni darhol ko'rsatdi, garchi panel ochilgan bo'lsa ham (hisob tez edi). Production build'da bu ogohlantirish chiqmasdi — xato esa qolardi. Kanonda kesh bor, ogohlantirish yo'q.

O'lchovdan xulosa: vazifalar ning effektlari StrictMode sinovidan o'tadi. Shuning uchun Activity darsida statistika panelini yashirish-ko'rsatish hech qanday yangi kod talab qilmadi.

8. Ko'p uchraydigan xatolar

9. Mashqlar

Mashqlar kurs/mashqlar/18/13-strictmode/ da. Har yechimni «Ishga tushir» bilan sinang.

1-mashq (oson): necha marta?

StrictMode ostida, birinchi chizishda:

• Komponent tanasidagi console.log necha marta chiqadi?
• useEffect(() => console.log("setup"), []) dagi setup necha marta?
• onClick ichidagi console.log (bir bosishda) necha marta?
• Production build'da komponent tanasidagi console.log necha marta?

2-mashq (o'rta): savatni tuzating

Quyidagi kod StrictMode'da savatga takror qo'shadi. Updater'ni sof qiling — boshqa joyga tegmang. Ishora: «Updater'dagi mutatsiya» bo'limi, immutable yangilash.

import { StrictMode, useState } from "react";
import { createRoot } from "react-dom/client";

function Cart() {
  const [items, setItems] = useState([]);
  function add(dish) {
    setItems((prev) => {
      prev.push(dish);
      return [...prev];
    });
  }
  return (
    <div>
      <button onClick={() => add("Osh")}>Osh</button>{" "}
      <button onClick={() => add("Lag'mon")}>Lag'mon</button>
      <p>Savatda: {items.join(", ")}</p>
    </div>
  );
}

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <Cart />
  </StrictMode>,
);

Ekranda:

Osh Lag'mon
Savatda: Osh, Lag'mon, Lag'mon

import { StrictMode, useState } from "react";
import { createRoot } from "react-dom/client";

function Cart() {
  const [items, setItems] = useState([]);
  function add(dish) {
    setItems((prev) => [...prev, dish]);
  }
  return (
    <div>
      <button onClick={() => add("Osh")}>Osh</button>{" "}
      <button onClick={() => add("Lag'mon")}>Lag'mon</button>
      <p>Savatda: {items.join(", ")}</p>
    </div>
  );
}

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <Cart />
  </StrictMode>,
);

Osh Lag'mon
Savatda: Osh, Lag'mon

3-mashq (qiyin): oshxona ekrani ulanishi

KitchenFeed buyurtmalar oqimiga ulanadi (connect — o'zgartirmang). StrictMode'da konsolda ochiq ulanishlar: 2 chiqadi. Effektni tuzating: ekranda bir vaqtda faqat bitta ulanish bo'lsin (oxirgi qator — ochiq ulanishlar: 1). Keyin o'ylab ko'ring: shu komponent <Activity> ichida yashirilsa nima bo'lardi? Ishora: «Nega aynan "olib tashlab, qaytadan qo'yish"» bo'limi.

import { StrictMode, useEffect } from "react";
import { createRoot } from "react-dom/client";

let open = 0;
function connect() {
  open++;
  console.log("ochiq ulanishlar:", open);
  return () => {
    open--;
  };
}

function KitchenFeed() {
  useEffect(() => {
    connect();
  }, []);
  return <p>Buyurtmalar oqimi</p>;
}

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <KitchenFeed />
  </StrictMode>,
);

Konsolda:

ochiq ulanishlar: 1
ochiq ulanishlar: 2

import { StrictMode, useEffect } from "react";
import { createRoot } from "react-dom/client";

let open = 0;
function connect() {
  open++;
  console.log("ochiq ulanishlar:", open);
  return () => {
    open--;
    console.log("uzildi, qoldi:", open);
  };
}

function KitchenFeed() {
  useEffect(() => {
    const disconnect = connect();
    return disconnect; // ✅ cleanup
  }, []);
  return <p>Buyurtmalar oqimi</p>;
}

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <KitchenFeed />
  </StrictMode>,
);

ochiq ulanishlar: 1
uzildi, qoldi: 0
ochiq ulanishlar: 1

4-mashq: Vazifalar qadami

vazifalar da npm run dev ni oching. DevTools → Network da api so'rovlariga qarang: birinchi GET bekor qilinganini ((canceled)) toping. Keyin npm run build va npm run preview da xuddi shu sahifani oching. Commit yo'q — bu o'lchov.

10. Real ishda

• Har yangi React loyihasi (Vite, Next.js) StrictMode bilan boshlanadi. Next.js App Router'da u standart yoqilgan (Next.js nima).
• Kod ko'rigida "konsolda ikki marta chiqyapti" degan izoh — ko'pincha StrictMode'ni emas, sof bo'lmagan kodni tuzatish signali.
• Eski loyihani yangilash (React versiyasini yangilash) — avval StrictMode'ni qismlarga qo'shib, UNSAFE_ ogohlantirishlarini tozalash, keyin versiyani ko'tarish.
• Intervyu savollari: "Nega dev'da effekt ikki marta ishlaydi?", "StrictMode production'ga ta'sir qiladimi?", "qaysi funksiyalar ikki marta chaqiriladi?", "updater'da mutatsiya nega xavfli?".

Xulosa

• StrictMode — faqat dev: render funksiyalari ikki marta, effekt va ref — setup → cleanup → setup, eskirgan API ogohlantirishlari.
• Ikki marta: komponent tanasi, useState/useReducer boshlang'ichi, useMemo/useCallback, updater va reducer.
• Sof funksiya ikki chaqiruvda bir xil natija beradi; mutatsiya (prev.push) — takror bo'lib ko'rinadi.
• Effekt sinovi — <Activity>, Suspense va Fast Refresh'ga tayyorgarlik.
• Production'da ta'siri yo'q — olib tashlamang.
• vazifalar dev'da: birinchi GET ERR_ABORTED (cleanup ishladi), keshsiz Promise — darhol ogohlantirish.

Keyingi dars: Class komponentlarni o'qish — eski loyihalardagi class extends Component, lifecycle metodlari va ularni hooklarga ko'chirish.

Manbalar

• React: <StrictMode> — react.dev/reference/react/StrictMode (2026-10 holati, React 19.3)
• React: "Keeping Components Pure" — react.dev/learn/keeping-components-pure
• React: "Synchronizing with Effects" — "How to handle the Effect firing twice in development" — react.dev/learn/synchronizing-with-effects