Apa perbedaan antara input controlled dan uncontrolled?

Question

Accepted Answer

Semuanya bermuara pada **siapa yang menjadi sumber kebenaran untuk nilai input** — React state, atau DOM itu sendiri. ## Controlled (React memiliki nilainya) Nilai `value` input didorong oleh state, dan `onChange` membuat state tetap sinkron. DOM selalu mencerminkan React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Karena state adalah sumber kebenaran, Anda dapat memvalidasi, memformat, atau mentransformasi pada setiap keystroke (misalnya memaksa huruf besar, membatasi panjang, menonaktifkan tombol submit). ## Uncontrolled (DOM memiliki nilainya) Browser menyimpan nilainya; Anda membacanya hanya ketika diperlukan melalui ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Kapan menggunakan yang mana - **Controlled**: sebagian besar form — Anda mendapatkan validasi, conditional UI, dan sumber kebenaran tunggal. Kelemahannya adalah re-render per keystroke (biasanya dapat diabaikan). - **Uncontrolled**: form sederhana, file inputs (`` selalu uncontrolled), atau mengintegrasikan widget non-React. Lebih sedikit kode, tetapi Anda tidak dapat bereaksi terhadap perubahan saat terjadi. Mencampurkan keduanya (melewatkan baik `value` dan `defaultValue`) adalah kesalahan umum dan memicu peringatan React.