Junior #forms#input#state
Controlled và uncontrolled component khác nhau thế nào?
⚡ Trả lời nhanh
Controlled: giá trị input nằm trong React state (`value` + `onChange`), React là nguồn sự thật. Uncontrolled: DOM tự giữ giá trị, bạn đọc qua `ref` hoặc `FormData` khi cần (`defaultValue` đặt giá trị ban đầu).
// Controlled
const [name, setName] = useState("");
<input value={name} onChange={(e) => setName(e.target.value)} />
// Uncontrolled
const ref = useRef(null);
<input defaultValue="An" ref={ref} />
// đọc: ref.current.value| Controlled | Uncontrolled | |
|---|---|---|
| Nguồn giá trị | React state | DOM |
| Validate theo từng phím | Dễ | Khó hơn |
| Re-render mỗi lần gõ | Có | Không |
| Phù hợp | Form phản ứng tức thời | Form đơn giản, file input, tích hợp lib ngoài |