React DevTools bilan ishlash: komponent daraxti, props, state va hooklar

Qisqacha: React DevTools — brauzer kengaytmasi (Chrome, Firefox, Edge). U DevTools'ga ikki panel qo'shadi: Components va Profiler. Components panelida sahifa DOM teglari emas, React komponentlari daraxti ko'rinadi: har birini tanlab, uning props, state va hooklarini o'qish va o'zgartirish mumkin. "rendered by" bo'limi komponentni kim chizganini, "Highlight updates" sozlamasi esa qaysi komponent qayta chizilayotganini ko'rsatadi. console.log qo'yib, sahifani qayta yuklashdan ko'ra tezroq — "state hozir nimaga teng?" degan savolga bir bosishda javob.

Bu darsda

• React DevTools'ni o'rnatasiz va u qaysi sahifada ishlashini bilasiz.
• Components panelida komponentni topasiz: qidiruv, sahifadan tanlash, daraxt bo'ylab yurish.
• Props, state va hooklarni o'qiysiz va ularni brauzerda o'zgartirasiz.
• "rendered by" (owner) bilan komponentni kim chizganini aniqlaysiz.
• "Highlight updates" bilan ortiqcha qayta chizishni ko'rasiz.
• Komponentdan uning manba fayliga, konsolga ($r) va DOM elementiga o'tasiz.

Oldin bilishingiz kerak: State I: useState, Chrome DevTools I: Elements va Console, State'ni ko'tarish.

1. Nega bu kerak?

Sardor vazifalar da xato qidiryapti: vazifa bajarilgan deb belgilanadi, lekin pastdagi hisob o'zgarmaydi. U Elements paneliga qaraydi va <p id="hisob"> ni topadi. Lekin bu yerda faqat natija — "2 ta vazifa qoldi". Bu matnni qaysi komponent chizdi? Unga qanday props keldi? App da nima hisoblandi? Elements panel bularni bilmaydi: u faqat DOM'ni ko'rsatadi, React esa DOM'ning orqasida.

Vanilla JavaScript'da Elements va Console yetardi: ma'lumot va DOM bir-biriga yaqin edi. React'da esa ikki qavat bor: komponentlar daraxti (props, state) va undan chizilgan DOM. Birinchi qavatni ko'rish uchun alohida asbob kerak.

Hayotiy o'xshatish: oshxonadagi tayyor taom (DOM) va uning retsepti (komponent + state). Taomni ko'rib "tuz ko'p" deyish mumkin. Lekin kim tuz soldi va retseptda qancha yozilgan edi — buni faqat oshxona daftaridan bilasiz. React DevTools — shu daftar.

2. O'rnatish va birinchi ko'rinish

2.1 Kengaytma

React DevTools — React jamoasining rasmiy kengaytmasi:

• Chrome — Chrome Web Store'da "React Developer Tools";
• Firefox — Firefox Add-ons'da o'sha nom bilan;
• Edge — Edge Add-ons'da.

Hozirgi versiyasi — 8.0.0 (npm'dagi react-devtools paketi bilan bir xil raqam, 2026-09-09; React 19.3 bilan bir kunda chiqqan). Kengaytma o'zi yangilanadi. Safari va boshqa brauzerlar uchun alohida dastur bor — npx react-devtools (Electron ilova, sahifaga bitta <script> ulanadi). Telefonda ochilgan sahifani tekshirishda ham shu yo'l ishlatiladi.

O'rnatgandan keyin React ishlatadigan sahifani oching va DevTools'ni oching (F12 yoki Ctrl+Shift+I). Yuqoridagi panellar qatorida ikkita yangi yorliq paydo bo'ladi: Components va Profiler. Ko'rinmasa — qatorning oxiridagi » belgisini bosing.

Kengaytma ikonkasi ham signal beradi: uni bossangiz, sahifadagi React development yoki production build ekanini aytadi. React ishlatmaydigan sahifada ikonka kulrang va panellar qo'shilmaydi.

2.2 Qaysi sahifada nima ko'rinadi

Production build'da minifikator funksiya nomlarini qisqartiradi (Tree shaking va minifikatsiya). vazifalar build'ida biz buni o'lchab ko'rganmiz: xato izida Statistika o'rniga ke, App o'rniga wn turibdi. Shuning uchun DevTools bilan asosan npm run dev da ishlanadi.

3. Components paneli

3.1 Daraxt

Components panelining chap tomoni — komponentlar daraxti. vazifalar ning hozirgi (Formalar II dan keyingi) holatida u taxminan shunday:

flowchart TD
  App --> Aloqa
  App --> F["YangiVazifaForma"]
  App --> Q["QidiruvMaydoni"]
  App --> R["VazifaRoyxati"]
  R --> VQ["VazifaQatori key=1"]
  VQ --> OQ["OddiyQator"]
  OQ --> AT["AmalTugmasi ×2"]
  App --> S["Statistika"]
  App --> E["Eksport"]
  App --> I["Import"]

Diagrammada qisqartirilgan: Filtrlar, SaralashTanlovi, OchirishDialog va boshqa qatorlar ham bor. Panel bilan Elements panelidagi DOM daraxtini solishtiring:

Sukut bo'yicha Components panelida DOM elementlari yashirilgan — faqat komponentlar. Bu sozlamada: (Settings) → Components → "Hide components where..." ro'yxatida "type equals dom nodes" filtri turadi. Komponentlar ichida <li>, <button> ni ham ko'rmoqchi bo'lsangiz — shu filtrni o'chiring.

key ham ko'rinadi: VazifaQatori key="1". State'ning saqlanishi darsidagi tajribalarni shu yerda kuzatish qulay: kalit o'zgarsa, daraxtda komponent qayta paydo bo'ladi.

3.2 Komponentni topish

Uch yo'l bor:

1. Qidiruv — daraxt ustidagi maydon: Statistika deb yozing. Matn yoki /regex/ qabul qiladi ("Search (text or /regex/)").
2. Sahifadan tanlash — panelning chap yuqori burchagidagi nishon belgisi ("Select an element in the page to inspect it"). Uni bosib, sahifadagi hisob qatoriga olib boring — daraxtda uni chizgan Statistika belgilanadi. Elements panelidagi "tanlash" bilan bir xil, faqat natija — komponent.
3. Elements'dan o'tish — Elements panelida DOM elementini tanlab, keyin Components'ga o'tsangiz, o'sha elementni chizgan komponent tanlangan bo'ladi.

3.3 O'ng panel: tanlangan komponent

Komponentni tanlasangiz, o'ng tomonda uning "kartasi" ochiladi. Statistika uchun:

• props — qoldi: 2, bajarildi: 1, teglar: Map(…), yopilgan: Set(…);
• rendered by — App (uni kim chizgani, pastda batafsil);
• source — Statistika.tsx va qator raqami.

TahrirQatori (vazifani tahrirlay boshlang) uchun hooks bo'limi ham bor:

props
  vazifa: {id: 1, matn: "Non olish", bajarildi: false}
  onSaqla: ƒ tahrirniSaqla() {}
  onBekor: ƒ tahrirniBekorQil() {}
  … (onAlmashtir, onOchir, onTahrirla — {...amallar} dan)
hooks
  1 State: "Non olish"
rendered by
  VazifaQatori
  VazifaRoyxati
  App

(Sxematik ko'rinish — panelda ochiladigan qatorlar, tartib va formatlash farq qilishi mumkin.) 1 State: "Non olish" — TahrirQatori dagi useState(vazifa.matn) (Formalar I). Hook nomsiz — raqam va turi bilan. React hooklarni nom bilan emas, chaqiruv tartibi bilan saqlaydi — bu Hooklar qoidalari darsining asosiy g'oyasi. Raqam — komponentdagi nechanchi hook ekani.

O'zgaruvchi nomini (matn) ko'rish uchun hooks bo'limidagi sehrli tayoqcha tugmasi bor: "Parse hook names (may be slow)". U manba kodini (source map orqali) o'qib, State yoniga (matn) deb yozadi. Katta loyihada sekin bo'lishi mumkin, shuning uchun sukut bo'yicha o'chiq. Sozlamalarda uni doimiy yoqish ham mumkin ("Always parse hook names from source").

Tekshirib ko'ring: YangiVazifaForma da ikkita useState bor: avval xato, keyin takliflar. DevTools'da ular qanday ko'rinadi?

4. Props va state'ni o'zgartirish

4.1 State'ni tahrirlash

DevTools'da qiymatni ikki marta bosib o'zgartirish mumkin. TahrirQatori ning 1 State qiymatini "Non olish" dan "Non va sut olish" ga o'zgartiring va Enter bosing. Sahifadagi tahrir maydonida matn darhol yangilanadi.

Nima bo'ldi? DevTools React'ga "shu komponentning 1-hook state'ini almashtir" dedi. Bu setMatn("Non va sut olish") chaqirgandek ta'sir qiladi: React komponentni qayta chizadi, controlled maydon yangi value ni oladi. Bu — tezkor tajriba vositasi: "state shunday bo'lsa, UI qanday ko'rinadi?" degan savolga kod yozmasdan javob. Masalan:

• uzun matnda tahrir qatori buziladimi (200 belgili satr kiriting);
• xato holati qanday ko'rinadi (YangiVazifaForma ning 1 State ini "Bu vazifa allaqachon bor" ga o'zgartiring);
• bo'sh ro'yxat holati (massiv state'ni [] ga).

Boolean qiymat yonida belgilash katakchasi chiqadi — bir bosishda true/false almashadi.

4.2 Props'ni tahrirlash — vaqtinchalik

Statistika ning qoldi props'ini 2 dan 99 ga o'zgartiring: hisob qatorida "99 ta vazifa qoldi" chiqadi. Endi biror vazifani belgilang — matn yana haqiqiy songa qaytadi.

Sabab: props — ota chizgan narsa (Props). DevTools uni vaqtincha almashtiradi, lekin ota keyingi safar chizganda (State'ni ko'tarish dagi oqim) haqiqiy qiymatni beradi. State esa komponentning o'zida — u kod uni o'zgartirmaguncha DevTools qiymatida qoladi.

Diqqat: DevTools'dagi o'zgarish faqat shu brauzer oynasida va faqat xotirada. U kodga yozilmaydi, sahifa yangilansa yo'qoladi. "DevTools'da tuzatdim, ishlayapti" — hali tuzatilmagan.

4.3 $r va konsolga chiqarish

Komponent tanlanganda, brauzer konsolida $r o'zgaruvchisi o'sha komponentga ishora qiladi. Console panelida $r.props yozsangiz — props obyekti. Elements panelidagi $0 (tanlangan DOM element) ga o'xshash.

O'ng paneldagi tugmalar:

Har props yoki state qatorida o'ng tugma bosilsa, menyu chiqadi: "Copy to clipboard" va "Store as global variable" (qiymat konsolda $reactTemp0 kabi nom bilan paydo bo'ladi). Katta obyektni (masalan, butun vazifalar ro'yxati) konsolda bemalol o'rganish uchun qulay.

"Open in editor" ishlashi uchun Components sozlamalarida muharrir tanlanadi (sukut bo'yicha vscode). Bu dev server bilan, manba fayllari kompyuteringizda bo'lganda ishlaydi.

5. "rendered by": komponentni kim chizdi

Owner (egasi) — komponentni JSX'da yaratgan komponent. U har doim daraxtdagi otasi emas. Misol — children va kompozitsiya darsidagi o'ram:

function Card({ children }) {
  return <section className="card">{children}</section>;
}

function Price() {
  return <b>35000 so'm</b>;
}

function App() {
  return (
    <Card>
      <Price />
    </Card>
  );
}

Ekranda:

35000 so'm

Daraxtda Price — Card ning bolasi (u Card ichida turibdi). Lekin <Price /> ni App yozgan: Card uni children sifatida tayyor oldi. DevTools'da Price ni tanlasangiz, "rendered by" bo'limida App turadi, Card emas.

Bu nega muhim? Price ga noto'g'ri props kelsa, aybdorni Card dan emas, App dan qidirasiz. Daraxt — "qayerda turibdi", rendered by — "kim yaratdi". Katta ilovada (o'nlab o'ram: tartib, panel, modal) bu farq soatlab qidirishni tejaydi. Rendered by ro'yxatidagi har nomni bosib, o'sha komponentga o'tish mumkin.

6. Highlight updates: kim qayta chizilyapti

6.1 Sozlama

Settings → General → "Highlight updates when components render" Yoqilgandan keyin har qayta chizilgan komponent sahifada qisqa vaqt rangli ramka bilan belgilanadi. Ko'p qayta chizilsa — rang issiqroq (ko'kdan qizilga) tomon o'zgaradi.

vazifalar da sinab ko'ring: qidiruv maydoniga harf yozing. Butun ilova chaqnaydi — forma, filtrlar, ro'yxat, hisob. Sabab — State'ni ko'tarish darsidagi tuzilma: qidiruv matni do'konda, har harfda render() butun App ni yangi props bilan chizadi. Bu vazifalar ning TEXNIK-QARZ ida yozilgan ataylab qabul qilingan narx: 1 000 vazifada ham sezilarli sekinlik yo'q (mini-ilova darsida o'lchovlar).

6.2 Render'ni o'zingiz sanash

"Highlight updates" — ko'z bilan ko'rish. Aniq son kerak bo'lsa, komponent ichida console.log — React har chaqirganda yoziladi:

import { useState } from "react";

function DishList({ query }) {
  console.log("DishList chizildi:", JSON.stringify(query));
  return <p>Qidirilmoqda: {query}</p>;
}

function Footer() {
  console.log("Footer chizildi");
  return <p>«Bahor» oshxonasi</p>;
}

function App() {
  const [query, setQuery] = useState("");
  return (
    <>
      <label>
        Qidiruv{" "}
        <input
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
      </label>
      <DishList query={query} />
      <Footer />
    </>
  );
}

Konsolda:

DishList chizildi: ""
Footer chizildi
DishList chizildi: "osh"
Footer chizildi

Ekranda:

Qidiruv
Qidirilmoqda: osh
«Bahor» oshxonasi

Natija oynasidagi harakat «osh» ni maydonga bir martada qo'ydi — bitta onChange, bitta qayta chizish. Klaviaturada yozsangiz, har harfga yana bir juft qator qo'shiladi. Footer qidiruvga umuman bog'liq emas, lekin har o'zgarishda qayta chizildi. Sabab — ota (App) qayta chizilsa, uning hamma bolalari ham chiziladi (props o'zgarmagan bo'lsa ham). Bu xato emas — React'ning sukut bo'yicha xulqi. Kichik komponentda bu arzon. Qimmat bo'lsa — Kompozitsiya orqali optimallashtirish va memo darslarida ikki yechim bor. Avvalo esa — o'lchash.

Maslahat: npm run dev dagi StrictMode komponentlarni ikki marta chaqiradi — console.log ham ikki marta chiqadi (Birinchi React loyiha darsida ko'rgan). DevTools sozlamalarida "Hide logs during additional invocations in Strict Mode" — ikkinchi chaqiruvdagi loglarni yashiradi.

6.3 Profiler — bir ko'z tashlash

Ikkinchi yorliq — Profiler. Yozishni boshlaysiz (doira tugma), ilovada biror ish qilasiz, to'xtatasiz — har "commit" (React DOM'ni yangilagan payt) uchun qaysi komponent qancha millisekund chizilgani chiqadi (flamegraph). Sozlamada "Record why each component rendered while profiling" yoqilsa, har komponent yonida "Why did this render?" — "props o'zgardi", "hook o'zgardi" kabi javob. Profiler bilan ishlash — Performance'ni o'lchash darsida, 18-qismda.

React Compiler ishlatilgan loyihada komponent yonida belgisi va "This component has been auto-memoized by the React Compiler." yozuvi chiqadi. vazifalar da kompilyator yoqilmagan (React Compiler — 18-qism) — bu belgi bo'lmaydi.

7. Xatolar va ogohlantirishlar

DevTools konsoldagi React ogohlantirishlarini komponent bilan bog'laydi. Daraxtda ogohlantirish bergan komponent yonida sariq (ogohlantirish) yoki qizil (xato) belgi va son paydo bo'ladi ("Show inline warnings and errors" sozlamasi). Masalan, Ro'yxatlar va key dagi "unique key" ogohlantirishi — .map() yozilgan komponent yonida.

Yana ikki foydali sozlama — Debugging bo'limida:

• "Append component stacks to console warnings and errors" — ogohlantirish ostiga "qaysi komponentlar ichida" degan iz qo'shiladi;
• "Break on warnings" — ogohlantirish chiqqanda kod to'xtaydi (debugger), chaqiruvlar zanjirini ko'rish uchun.

Xatoni topish tartibi to'liq — React ilovani debug qilish darsida.

8. Vazifalar: DevTools bilan sayohat (commit yo'q)

Bu darsda vazifalar kodi o'zgarmaydi. npm run dev bilan oching va quyidagilarni bajaring — har biri bugungi darsning bir bo'limi:

1. Daraxt. Components panelida App ni oching. Uning bolalari ro'yxatini «Daraxt» bo'limidagi diagramma bilan solishtiring. App ning hooks bo'limi yo'q — nega? (Javob: hozircha haqiqat manbai vanilla do'konda, App hamma narsani props'dan oladi.)
2. Props. App ni tanlab, holat props'ini oching: vazifalar, filtr, qidiruv, tahrirId. Filtr tugmasini bosing — filtr qiymati almashadi.
3. State. Biror vazifani tahrirlay boshlang. TahrirQatori ni toping, 1 State ni DevTools'da o'zgartiring va maydonda kuzating.
4. rendered by. AmalTugmasi ni tanlang. Daraxtda u Qator ichida, lekin "rendered by" da birinchi — OddiyQator. Nega? (OddiyQator tugmalarni <Qator> ga children qilib beradi.)
5. Highlight updates. Yoqing va qidiruvga yozing: butun App chaqnaydi. Endi biror katakni belgilang — bu safar ham. Eslatma yozing: bu holat useEffect III darsida, state App ga ko'chganda ham shunday bo'ladimi — o'shanda tekshiramiz.
6. Manba. Statistika ni tanlab, <> tugmasini bosing — Sources'da Statistika.tsx ochiladi (Vite dev server original faylni beradi).

9. Ko'p uchraydigan xatolar

Anonymous haqida: React komponent nomini funksiya nomidan oladi. Nomsiz funksiyaning nomi bo'sh:

const Named = () => <p>Osh</p>;

function App() {
  const anonymous = (() => () => <p>Manti</p>)();
  const names = [Named.name, anonymous.name];
  console.log(JSON.stringify(names));
  return <Named />;
}

Konsolda:

["Named",""]

Ekranda:

Osh

const Named = () => … — JavaScript strelkali funksiyaga o'zgaruvchi nomini beradi (Function expression va arrow funksiyalar). Boshqa funksiyadan qaytgan funksiya esa nomsiz: DevTools'da u "Anonymous" bo'lib ko'rinadi. Komponentlar darsidagi qoida — har komponent nomli funksiya — DevTools uchun ham kerak.

10. Mashqlar

Mashqlar kurs/mashqlar/17/20-devtools/ da.

1-mashq (oson): Qayerga qarash kerak?

• Komponentni sahifadagi elementidan topish uchun Components panelidagi qaysi belgi bosiladi (yozuvi):
• Komponentni JSX'da kim yaratganini ko'rsatadigan bo'lim:
• Qayta chizilgan komponentlarni sahifada ramka bilan ko'rsatadigan sozlama ("Highlight … when components render"):

2-mashq (o'rta): «Bahor» menyusini DevTools bilan o'zgartirish

Birinchi React loyiha darsidagi bahor-menyu loyihasini (2- va 3-mashq: MenuCard va ikkinchi orol IshVaqti) npm run dev bilan oching. DevTools bilan:

1. MenuCard lardan birini toping va uning price props'ini 35000 dan 1 ga o'zgartiring. Sahifada nima o'zgardi?
2. IshVaqti komponentidagi state'ni (ochiq/yopiq) DevTools'dan almashtiring.
3. «Almashtir» tugmasini bir necha marta bosing. 1-qadamdagi narx tiklandimi? Keyin sahifani yangilang.

3-mashq (qiyin): Ortiqcha render'ni toping va kamaytiring

Quyidagi «Bahor» sahifasida mehmon izoh yozganda menyu ham qayta chiziladi. Ikki render hisoblagich (console.log) bilan buni isbotlang, keyin state'ni pastga tushiring (State'ni ko'tarish dagi "keragidan baland emas" qoidasi): izoh state'i faqat izoh komponentida bo'lsin. Natija: "Izoh" ga yozilganda Menu faqat bir marta (birinchi chizishda) chizilsin.

function App() {
  const [note, setNote] = useState("");
  return (
    <>
      <Menu />
      <label>
        Izoh{" "}
        <input
          value={note}
          onChange={(e) => setNote(e.target.value)}
        />
      </label>
      <p>{note.length}/200</p>
    </>
  );
}

import { useState } from "react";

function Menu() {
  console.log("Menu chizildi");
  return <p>Osh 35000, Manti 30000</p>;
}

function NoteField() {
  const [note, setNote] = useState("");
  console.log("NoteField chizildi");
  return (
    <>
      <label>
        Izoh{" "}
        <input
          value={note}
          onChange={(e) => setNote(e.target.value)}
        />
      </label>
      <p>{note.length}/200</p>
    </>
  );
}

function App() {
  return (
    <>
      <Menu />
      <NoteField />
    </>
  );
}

Menu chizildi
NoteField chizildi
NoteField chizildi

Osh 35000, Manti 30000
Izoh
4/200

4-mashq: Vazifalar sayohati

«Vazifalar: DevTools bilan sayohat» bo'limidagi oltita qadamni bajaring va har biriga bir qator javob yozing (kurs/mashqlar/17/20-devtools/vazifalar.md). Kodga o'zgarish kiritilmaydi.

11. Real ishda

• Har kungi asbob. React dasturchisining DevTools'dagi vaqti Components paneli bilan Console o'rtasida bo'linadi. "Bu komponentga nima keldi?" — birinchi savol, javob — bir bosish.
• Begona kodni o'qish. Yangi loyihaga kelganda sahifadagi elementni nishon bilan tanlab, "rendered by" va "source" orqali uning faylini topish — kod bazasida yo'l topishning eng tez usuli (Begona repoda orientatsiya).
• Performance — Profiler va "Why did this render?" — 18-qismda. Uzoq ro'yxat, sekin yozish kabi shikoyatlarda birinchi qadam.
• Intervyu savollari: "React DevTools'da nimalarni ko'rish mumkin?", "Owner va parent farqi?", "Nega production'da komponent nomlari g'alati?", "Qayta chizilishni qanday aniqlaysiz?".

Xulosa

• React DevTools — Chrome, Firefox, Edge kengaytmasi; Components va Profiler panellarini qo'shadi.
• Components — komponentlar daraxti: qidiruv, sahifadan tanlash, Elements'dan o'tish.
• O'ng panel: props, hooks (tartib raqami bilan, "Parse hook names" — nomlar), rendered by, source.
• State'ni o'zgartirish komponent o'zgartirmaguncha turadi; props — ota qayta chizguncha.
• "Highlight updates" va console.log — kim va necha marta qayta chizilganini ko'rsatadi.
• Production build'da nomlar qisqargan — DevTools bilan npm run dev da ishlang; komponentlarni nomli funksiya qiling.

Keyingi dars: React'da stil berish usullari — className, style, CSS Modules, Tailwind va CSS-in-JS React komponentlarida: qaysi biri qachon.

Manbalar

• React: "React Developer Tools" — react.dev/learn/react-developer-tools
• react-devtools 8.0.0 (npm, 2026-09-09) — standalone ilova; panel matnlari shu versiyadan
• React: "Rules of Hooks" (hooklar tartibi) — react.dev/reference/rules/rules-of-hooks