Uncontrolled Components

Uncontrolled Components: وقتی مقدار در اختیار خود DOM می‌ماند

در فصل دوم به‌طور مختصر با مفهوم Uncontrolled Component آشنا شدیم. در این درس، این رویکرد را با جزئیات بیشتر و مثال‌های عملی بررسی می‌کنیم و می‌بینیم دقیقاً چه زمانی مناسب‌تر از Controlled Components است.

یادآوری: تفاوت اصلی با Controlled

در یک Uncontrolled Component، مقدار عنصر فرم توسط خود DOM مدیریت می‌شود، نه توسط State خود React. React در این حالت مقدار فعلی input را در هر لحظه دنبال نمی‌کند؛ فقط در صورت نیاز، مثلاً هنگام ارسال فرم، به آن مقدار دسترسی پیدا می‌کند.

دسترسی به مقدار با useRef

چون در این رویکرد نیازی به هماهنگ نگه‌داشتن State با مقدار input نیست، معمولاً برای خواندن مقدار فعلی، از useRef استفاده می‌شود؛ Hookی که در فصل هفتم با جزئیات کامل آن آشنا خواهیم شد. در این‌جا فقط به‌اندازه‌ای که برای این مثال لازم است، از آن استفاده می‌کنیم:

function LoginForm() {
  const usernameRef = useRef(null);

  function handleSubmit(e) {
    e.preventDefault();
    console.log("نام کاربری:", usernameRef.current.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input ref={usernameRef} />
      <button type="submit">ورود</button>
    </form>
  );
}

در این کد، هیچ Stateی برای مقدار input تعریف نشده است. مقدار وارد‌شده، به‌طور کامل در خود عنصر DOM باقی می‌ماند و فقط در لحظه Submit، از طریق usernameRef.current.value خوانده می‌شود.

مقدار پیش‌فرض با defaultValue

در Controlled Components، برای تعیین مقدار اولیه، از value همراه با State اولیه استفاده می‌شد. اما در Uncontrolled Components، چون value استفاده نمی‌شود (وگرنه عنصر Controlled می‌شود)، برای تعیین مقدار اولیه از defaultValue استفاده می‌کنیم:

<input ref={usernameRef} defaultValue="مهمان" />

برخلاف value، مقدار defaultValue فقط در اولین رندر اعمال می‌شود؛ پس از آن، تغییرات کاربر در input، بدون دخالت React، توسط خود DOM دنبال می‌شود. همین الگو برای checkbox و radio هم با defaultChecked به‌جای checked وجود دارد.

چه زمانی Uncontrolled منطقی‌تر است

چند موقعیت رایج که Uncontrolled Components در آن‌ها مناسب هستند:

فرم‌های ساده که فقط در لحظه Submit به مقدار نیاز دارند و نیازی به اعتبارسنجی لحظه‌ای یا واکنش به هر کلید فشرده‌شده نیست.
ادغام با کتابخانه‌های غیر React که خودشان مقدار یک عنصر DOM را مدیریت می‌کنند.
فرم‌هایی با تعداد زیاد فیلد که هدف صرفاً خواندن یک‌جای مقادیر در لحظه ارسال است، بدون نیاز به رندر مجدد به ازای هر تغییر.

چرا Controlled معمولاً انتخاب پیش‌فرض بهتری است

با این حال، در بیشتر برنامه‌های React، Controlled Components انتخاب رایج‌تری هستند؛ چون دسترسی همیشگی به مقدار فعلی از طریق State، کارهایی مانند غیرفعال کردن دکمه بر اساس مقدار فعلی، نمایش پیام خطا هنگام تایپ، یا هماهنگ کردن چند فیلد را ساده‌تر می‌کند. Uncontrolled بیشتر یک ابزار مکمل برای موقعیت‌های خاص است، نه جایگزین کلی Controlled.

مثال قابل اجرا

یک فرم ساده با Uncontrolled Input

import { useRef } from "react";

function App() {
  const nameRef = useRef(null);

  function handleSubmit(e) {
    e.preventDefault();
    alert("نام وارد‌شده: " + nameRef.current.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input ref={nameRef} defaultValue="مهمان" />
      <button type="submit">ارسال</button>
    </form>
  );
}

برای دیدن پیش‌نمایش کامپوننت، روی Run بزنید.

جمع‌بندی

در Uncontrolled Components، مقدار عنصر فرم توسط خود DOM نگه داشته می‌شود و معمولاً با useRef و فقط در لحظه نیاز خوانده می‌شود؛ مقدار اولیه هم با defaultValue یا defaultChecked تعیین می‌شود. این رویکرد برای فرم‌های ساده یا ادغام با ابزارهای غیر React مناسب است، اما Controlled Components به‌دلیل دسترسی همیشگی به مقدار، همچنان انتخاب پیش‌فرض رایج‌تر است. در درس بعدی به مدیریت State فرم و Validation می‌پردازیم.

Uncontrolled Components