Props — readonly nima uchun, prop drilling muammosi

~15 daq · React · Kirish va Asoslar

Props nima uchun readonly?

Oldingi darsda props ni o'zgartirish mumkin emasligini aytdik. Lekin nima uchun? Bu cheklov tasodifiy emas.

Tasavvur qiling: ota komponent foydalanuvchi ma'lumotini bolaga berdi. Bola uni o'zgartirdi. Ota hali ham eski ma'lumotni ko'rsatmoqda — chunki u o'zgarganidan xabarsiz. Ekranda ikki xil ma'lumot.

Ota: user = { ism: "Ali" }
      │
      ▼
Bola: props.user.ism = "Vali"  ← o'zgartirdi
      │
      ▼
Ota hali "Ali" ko'rsatmoqda — sinxronizatsiya yo'q

React bu muammoni oldini olish uchun props ni readonly qilgan. Ma'lumot faqat bir yo'nalishda oqadi — otadan bolaga. Bu one-way data flow deyiladi.

Ma'lumotni o'zgartirish kerak bo'lsa — ota komponentda state ishlatiladi, o'zgartirish funksiyasi props orqali bolaga beriladi. Bola funksiyani chaqiradi — ota o'zgartiradi. Tartib saqlanadi.

function Ota() {
  const [ism, setIsm] = useState('Ali');

  return <Bola ism={ism} ismniOzgartir={setIsm} />;
}

function Bola({ ism, ismniOzgartir }) {
  return (
    <div>
      <p>{ism}</p>
      <button onClick={() => ismniOzgartir('Vali')}>
        O'zgartir
      </button>
    </div>
  );
}

Bola props ni o'zgartirmadi — otaga "o'zgartir" dedi. Ota o'zgartirdi. Hamma joy yangilandi.

Prop Drilling muammosi

Props bir yo'nalishda oqadi — bu yaxshi. Lekin loyiha o'sganda muammo paydo bo'ladi.

Tasavvur qiling: foydalanuvchi ma'lumoti App da bor. Uni Navbar ichidagi UserAvatar komponentiga yetkazish kerak.

App
└── Layout
    └── Navbar
        └── UserMenu
            └── UserAvatar  ← shu yerga kerak

Props bilan:

function App() {
  const user = { ism: 'Jasur', rasm: '/jasur.jpg' };
  return <Layout user={user} />;
}

function Layout({ user }) {
  return <Navbar user={user} />;  // Layout ishlatmaydi, lekin uzatadi
}

function Navbar({ user }) {
  return <UserMenu user={user} />;  // Navbar ham ishlatmaydi, uzatadi
}

function UserMenu({ user }) {
  return <UserAvatar user={user} />;  // UserMenu ham ishlatmaydi, uzatadi
}

function UserAvatar({ user }) {
  return <img src={user.rasm} alt={user.ism} />;  // faqat shu ishlatadi
}

Layout, Navbar, UserMenu — uchala komponent user ni ishlatmaydi. Faqat keyingisiga uzatadi. Bu — prop drilling (props ni "burg'ulash").

Nima muammo?

Oraliq komponentlar keraksiz props oladi — ular haqida bilishi shart emas
user tuzilishi o'zgarganda — oraliq barcha komponentlarni o'zgartirish kerak
Kod o'qilishi qiyinlashadi — props qayerdan kelayotganini kuzatish qiyin

Yechim

Prop drilling muammosini hal qilish uchun Context API ishlatiladi. Bu keyinchalik alohida darsda. Hozircha muammoni tanib olish muhim.

💡 Prop drilling har doim yomon emas. 2-3 daraja chuqurlik — normal. 4-5 daraja va undan chuqur bo'lsa — Context yoki global state vaqti keldi.

Props va komponent arxitekturasi

Props ni to'g'ri ishlatish — komponentlarni qanday tuzishga bog'liq.

Ma'lumotni yuqorida saqlang

Agar ikki komponent bir xil ma'lumotni ishlatsa — ularning umumiy ota komponentida saqlang.

❌ Yomon — har biri alohida saqlaydi, sinxronizatsiya yo'q
SearchInput (o'z qidiruv matni bor)
SearchResults (o'z qidiruv matni bor)

✅ Yaxshi — ota saqlaydi, ikkalasiga beradi
App (qidiruv matni shu yerda)
├── SearchInput (props orqali oladi, o'zgartirish funksiyasini chaqiradi)
└── SearchResults (props orqali oladi, filtrlaydi)

function App() {
  const [qidiruv, setQidiruv] = useState('');

  return (
    <div>
      <SearchInput qidiruv={qidiruv} ozgartir={setQidiruv} />
      <SearchResults qidiruv={qidiruv} />
    </div>
  );
}

Bu pattern "state ni yuqoriga ko'tarish" (lifting state up) deyiladi. React da juda ko'p ishlatiladi.

Xulosa

Props readonly — ma'lumot faqat otadan bolaga oqadi. Bu tartibni saqlaydi. O'zgartirish kerak bo'lsa — ota komponentda state, o'zgartirish funksiyasi props orqali beriladi.

Prop drilling — ma'lumotni ko'p daraja chuqurlikdagi komponentga uzatish. 2-3 daraja normal, undan chuqur bo'lsa Context API ishlatiladi.

Lifting state up — ikki komponent bir xil ma'lumotni ishlatsa, ularning umumiy otasida saqlang.

Keyingi dars

8-dars: useState — state nima, qanday ishlaydi, re-render tushunchasi