Uncontrolled Component — useRef bilan, qachon kerak

~15 daq · React · Component Patterns

Controlled vs Uncontrolled

Oldingi darsda controlled component o'rgandik — input qiymati React state da. Har harf yozilganda state yangilanadi, komponent qayta chiziladi.

Uncontrolled component — input qiymati DOM da saqlanadi. React state yo'q. Qiymat faqat kerak bo'lganda (masalan, forma yuborilganda) olinadi.

Controlled:
  Har harf → onChange → setState → re-render
  Qiymat: React state da

Uncontrolled:
  Har harf → DOM o'zgaradi (React bilmaydi)
  Qiymat: faqat kerak bo'lganda ref orqali olinadi

Uncontrolled qanday yoziladi?

function Forma() {
  const ismRef = useRef(null);
  const emailRef = useRef(null);

  function yuborish(e) {
    e.preventDefault();
    // Faqat yuborishda qiymatlarni olamiz
    const ism = ismRef.current.value;
    const email = emailRef.current.value;
    console.log({ ism, email });
  }

  return (
    <form onSubmit={yuborish}>
      <input ref={ismRef} defaultValue="" placeholder="Ism" />
      <input ref={emailRef} type="email" placeholder="Email" />
      <button type="submit">Yuborish</button>
    </form>
  );
}

defaultValue — boshlang'ich qiymat. value emas — value yozsangiz controlled bo'lib qoladi.

Qachon uncontrolled kerak?

Ko'p hollarda controlled yaxshiroq. Lekin uncontrolled uchun aniq holatlar bor.

Fayl yuklash — <input type="file"> controlled bo'lmaydi. Fayl qiymatini dasturiy o'rnatib bo'lmaydi, faqat o'qish mumkin:

function FaylYuklash() {
  const faylRef = useRef(null);

  function yuborish() {
    const fayl = faylRef.current.files[0];
    if (!fayl) return;

    const formData = new FormData();
    formData.append('fayl', fayl);

    fetch('/api/yuklash', { method: 'POST', body: formData });
  }

  return (
    <div>
      <input type="file" ref={faylRef} accept="image/*" />
      <button onClick={yuborish}>Yuklash</button>
    </div>
  );
}

Tashqi kutubxona bilan integratsiya — ba'zi kutubxonalar (rich text editor, date picker) o'z DOM elementlarini boshqaradi. React state bilan bog'lash qiyin — uncontrolled osonroq.

Controlled vs Uncontrolled — qachon qaysi?

Controlled:
  ✅ Real-time validatsiya (har harf yozilganda)
  ✅ Qiymatga qarab boshqa UI o'zgartirish
  ✅ Forma qiymatlarini dasturiy tozalash/o'zgartirish
  ✅ Ko'p hollarda tavsiya etiladi

Uncontrolled:
  ✅ Fayl yuklash (majburiy)
  ✅ Tashqi kutubxona bilan integratsiya
  ✅ Oddiy forma, faqat yuborishda qiymat kerak

💡 React Hook Form kutubxonasi uncontrolled yondashuvni ishlatadi — shuning uchun juda tez ishlaydi. Har harf yozilganda re-render bo'lmaydi. Keyinchalik alohida dars bo'ladi.

Xulosa

Controlled:    value={state} + onChange → state da saqlanadi
Uncontrolled:  ref + defaultValue      → DOM da saqlanadi

Oddiy qoida: controlled ishlatish. Faqat fayl yuklash yoki tashqi kutubxona bilan ishlashda uncontrolled.

Keyingi dars

30-dars: Component Composition — children, slot pattern