React Forms - Controlled vs Uncontrolled Components

Halo! 👋

Kalau kamu pernah bikin website yang interaktif, pasti udah gak asing sama yang namanya Form. Mulai dari Login, Register, sampai “Contact Us”, form itu ada di mana-mana.

Di HTML biasa, bikin form itu simpel banget. Tapi pas masuk ke React, ceritanya jadi agak… menarik. Kamu bakal sering denger istilah “Controlled” dan “Uncontrolled” components.

Bingung? Jangan panik. Hari ini saya bakal jelasin bedanya dan kapan kamu harus pakai masing-masing cara. Yuk kita bedah!

1. Controlled Components (Cara “React Banget”)

Di Controlled Component, React yang pegang kendali. Nilai dari input form disimpan di dalam State komponen (useState).

Setiap kali kamu ngetik satu huruf, event onChange bakal jalan, update state, dan React bakal ngerender ulang input itu dengan nilai yang baru. Jadi kayak muter terus.

Kira-kira kodenya begini:

import { useState } from "react";

const ControlledForm = () => {
  const [name, setName] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Halo, ${name}!`);
  };

  return (
    <form onSubmit={handleSubmit} className="p-4 border rounded">
      <label className="block mb-2">Nama:</label>
      <input
        type="text"
        value={name} // 1. Nilai diambil dari State
        onChange={(e) => setName(e.target.value)} // 2. Perubahan update ke State
        className="border p-2 rounded w-full mb-4"
      />
      <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">
        Submit
      </button>
    </form>
  );
};

Kenapa pakai ini?

• Validasi Instan: Kamu bisa cek inputan user saat mereka ngetik (misalnya cek kekuatan password).
• Conditional Disabling: Tombol submit bisa dimatiin kalau form masih kosong.
• Enforced Format: Kamu bisa ngelarang user ngetik angka di kolom nama, misalnya.

Kekurangannya? Kodenya jadi agak lebih panjang. Tapi buat form yang kompleks, ini worth it banget.

2. Uncontrolled Components (Cara “HTML Klasik”)

Di Uncontrolled Component, DOM yang pegang kendali. React gak capek-capek mantau nilainya setiap saat. Sebaliknya, pas kamu butuh nilainya (misalnya pas tombol submit dipencet), kamu “tarik” nilainya langsung dari DOM pakai Ref (useRef).

Rasanya lebih mirip kayak coding HTML/JavaScript biasa.

import { useRef } from "react";

const UncontrolledForm = () => {
  const nameInputRef = useRef(null); // Bikin Ref

  const handleSubmit = (e) => {
    e.preventDefault();
    // Baca nilainya langsung dari elemen DOM
    const name = nameInputRef.current.value;
    alert(`Halo, ${name}!`);
  };

  return (
    <form onSubmit={handleSubmit} className="p-4 border rounded">
      <label className="block mb-2">Nama:</label>
      <input
        type="text"
        ref={nameInputRef} // Tempel Ref di sini
        defaultValue="" // Pakai defaultValue, bukan value!
        className="border p-2 rounded w-full mb-4"
      />
      <button type="submit" className="bg-green-500 text-white px-4 py-2 rounded">
        Submit
      </button>
    </form>
  );
};

Kenapa pakai ini?

• Lebih Ringkas: Gak perlu useState atau onChange buat setiap kolom input.
• Integrasi Non-React: Bagus kalau kamu gabungin React sama library lain yang mainan DOM langsung.
• File Inputs: <input type="file" /> itu hampir selalu uncontrolled karena React gak bisa nge-set nilai file demi alasan keamanan.

Jadi, Harus Pakai yang Mana?

Aturan main sederhananya gini:

1. Pakai Controlled Components buat sebagian besar kasus. Ini kasih kamu kontrol penuh atas data. Kalau butuh validasi atau UI yang dinamis, ini jalannya.
2. Pakai Uncontrolled Components kalau kamu bikin form yang super simpel (kayak newsletter signup), butuh upload file, atau lagi migrasi aplikasi JS lama ke React.

Penutup

Gak ada jawaban yang “salah”, yang ada cuma alat yang tepat buat situasi yang tepat.

• Mau kontrol penuh? Gas Controlled.
• Mau cepet dan simpel (atau mainan file)? Gas Uncontrolled.

Kuasai keduanya, dan form gak bakal jadi momok lagi. Selamat ngoding! 🚀