Controlled vs Uncontrolled Component di React

Komponen terkontrol (controlled) adalah elemen form yang nilainya tinggal di state React: kamu mengirim value dan memperbarui state di onChange, jadi React yang menentukan apa yang ditampilkan input. Komponen tidak terkontrol (uncontrolled) menyimpan nilainya di DOM, seperti HTML biasa: kamu mengirim defaultValue sebagai nilai awal dan membaca nilai terkininya nanti lewat ref atau FormData.

import { useRef, useState } from 'react';

export default function App() {
    const [controlled, setControlled] = useState('Ada');
    const uncontrolledRef = useRef(null);

    function readBoth() {
        console.log('controlled:', controlled);
        console.log('uncontrolled:', uncontrolledRef.current.value);
    }

    return (
        <div style={{ display: 'grid', gap: 8, maxWidth: 260 }}>
            <input
                value={controlled}
                onChange={(e) => setControlled(e.target.value)}
            />
            <input defaultValue="Linus" ref={uncontrolledRef} />
            <p>Controlled value in state: {controlled}</p>
            <button onClick={readBoth}>Read both</button>
        </div>
    );
}

Ketik di kedua input. Paragrafnya mengikuti input pertama di setiap ketukan tombol, karena setiap perubahan mengatur state dan merender lagi. Input kedua hanya berubah di DOM; React tidak merender, dan kamu baru melihat nilainya saat "Read both" memintanya.

Input terkontrol

Dengan input terkontrol, state React menjadi satu-satunya sumber kebenaran. Alur di setiap ketukan tombol adalah:

1. Pengguna mengetik, dan browser memicu event input.
2. Handler onChange milikmu membaca e.target.value dan memanggil setter.
3. React merender lagi dan menulis state baru kembali ke value milik input.

Karena kodemu berada di tengah alur itu, kamu bisa melakukan hal yang tidak bisa dilakukan input tidak terkontrol: menolak atau mengubah bentuk karakter, menampilkan nilainya di tempat lain, menonaktifkan tombol sampai nilainya valid, atau mengatur nilainya dari kode (tombol "Clear", saran yang diklik pengguna).

import { useState } from 'react';

export default function App() {
    const [code, setCode] = useState('');

    function handleChange(e) {
        const digits = e.target.value.replace(/\D/g, '').slice(0, 6);
        setCode(digits);
    }

    return (
        <div>
            <input
                value={code}
                onChange={handleChange}
                placeholder="6 digit code"
                style={{ letterSpacing: 6, fontSize: 18, width: 150 }}
            />{' '}
            <button disabled={code.length !== 6}>Verify</button>{' '}
            <button onClick={() => setCode('123456')}>Fill demo code</button>
        </div>
    );
}

Coba ketik huruf: hurufnya tidak pernah muncul, karena handler membuang semua yang bukan digit sebelum mengatur state. Tombol Verify tetap nonaktif sampai ada tepat enam digit.

Input terkontrol dipakai oleh contoh-contoh form di halaman form, dan menjadi pilihan default di sebagian besar kode React.

Input tidak terkontrol

Input tidak terkontrol bekerja seperti HTML biasa. React merendernya sekali dengan defaultValue (atau defaultChecked untuk checkbox dan radio) lalu membiarkannya. Untuk membaca nilainya, simpan ref ke elemen itu, atau baca semua field bernama dari form saat submit dengan FormData.

import { useState } from 'react';

export default function App() {
    const [result, setResult] = useState(null);

    function handleSubmit(e) {
        e.preventDefault();
        const data = new FormData(e.target);
        setResult(Object.fromEntries(data));
    }

    return (
        <form onSubmit={handleSubmit}>
            <input name="city" defaultValue="Oslo" />{' '}
            <label>
                <input name="subscribe" type="checkbox" defaultChecked />
                Subscribe
            </label>{' '}
            <button type="submit">Send</button>
            {result && <pre>{JSON.stringify(result, null, 2)}</pre>}
        </form>
    );
}

Tidak ada state untuk field-field itu dan tidak ada onChange. Nilainya baru dikumpulkan saat form dikirim. Hilangkan centang pada checkbox lalu kirim lagi: key subscribe menghilang, karena checkbox yang tidak dicentang sama sekali tidak termasuk dalam FormData.

Mengubah defaultValue setelah render pertama tidak berpengaruh apa pun pada input, karena React hanya menerapkannya saat elemen dibuat. Untuk mengatur ulang form tidak terkontrol, panggil e.target.reset(), atau beri form itu key baru agar React membuat input yang baru.

Input yang tidak bisa diketik

Jika kamu mengirim value tanpa onChange, input itu terkontrol, tetapi tidak ada yang pernah memperbarui state-nya. React menulis nilai yang sama kembali setelah setiap ketukan tombol, jadi input itu tampak membeku.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('Ada');

    return (
        <div style={{ display: 'grid', gap: 8, maxWidth: 260 }}>
            <input value={name} />
            <input value={name} onChange={(e) => setName(e.target.value)} />
            <input defaultValue={name} />
            <input value={name} readOnly />
        </div>
    );
}

Coba ketik di setiap field. Field pertama tidak berubah. Field kedua adalah perbaikan untuk input terkontrol, dan saat kamu mengetik di sana, field pertama dan terakhir ikut berubah, karena ketiganya membaca state yang sama. Field ketiga menerima ketikan karena tidak terkontrol. Field keempat sengaja menyatakan bahwa ia tidak bisa diedit.

Saat development, React mencatat peringatan untuk input pertama: "You provided a value prop to a form field without an onChange handler". Pratinjau berjalan seperti build production, jadi kamu tidak akan melihat peringatan itu di sini, tetapi kamu akan melihatnya di dev server milikmu sendiri.

Berubah dari tidak terkontrol menjadi terkontrol

React menentukan apakah sebuah input terkontrol dengan melihat value. Jika value bernilai undefined atau null, input itu tidak terkontrol. Jadi input yang value-nya awalnya undefined lalu belakangan menjadi string berubah dari tidak terkontrol menjadi terkontrol selama hidupnya, dan React memberi peringatan saat development: "A component is changing an uncontrolled input to be controlled".

Peringatan itu menunjuk ke bug sungguhan. Berbalik arah, dari string ke undefined, membuat input itu tidak terkontrol lagi, dan React berhenti menulis ke input itu.

import { useState } from 'react';

export default function App() {
    const [buggy, setBuggy] = useState(undefined);
    const [fixed, setFixed] = useState('');

    return (
        <div style={{ display: 'grid', gap: 8, maxWidth: 300 }}>
            <input
                value={buggy}
                onChange={(e) => setBuggy(e.target.value)}
                placeholder="Starts as undefined"
            />
            <button onClick={() => setBuggy(undefined)}>Clear first</button>
            <input
                value={fixed}
                onChange={(e) => setFixed(e.target.value)}
                placeholder="Starts as an empty string"
            />
            <button onClick={() => setFixed('')}>Clear second</button>
        </div>
    );
}

Ketik sesuatu di kedua input dan tekan setiap tombol Clear. Input kedua menjadi kosong. Input pertama tetap menyimpan teksnya: mengatur state ke undefined membuatnya tidak terkontrol, jadi React tidak lagi mengendalikan apa yang ditampilkannya.

Sumber undefined yang biasa adalah data yang belum dimuat (value={user.name} sebelum data user datang) atau field objek yang belum ada. Ada dua perbaikan:

const [name, setName] = useState('');   // start with a string
<input value={user?.name ?? ''} />       // or fall back to one

Untuk checkbox, aturan yang sama berlaku untuk checked: mulai dari false, bukan undefined.

Input file selalu tidak terkontrol

<input type="file"> tidak bisa dikontrol, karena browser tidak mengizinkan halaman mengatur nilainya (halaman yang bisa memilih file di disk-mu akan menjadi celah keamanan). Baca file yang dipilih dari e.target.files di onChange, atau lewat ref saat form dikirim.

import { useRef, useState } from 'react';

export default function App() {
    const inputRef = useRef(null);
    const [files, setFiles] = useState([]);

    function handleChange(e) {
        setFiles(Array.from(e.target.files, (f) => `${f.name} (${f.size} bytes)`));
    }

    function clear() {
        inputRef.current.value = '';
        setFiles([]);
    }

    return (
        <div>
            <input type="file" multiple ref={inputRef} onChange={handleChange} />
            <button onClick={clear}>Clear</button>
            <ul>
                {files.map((f) => (
                    <li key={f}>{f}</li>
                ))}
            </ul>
            {files.length === 0 && <p>No files chosen.</p>}
        </div>
    );
}

Pilih satu atau dua file dari komputermu; tidak ada yang diunggah, contoh ini hanya menampilkan nama dan ukurannya. Satu-satunya nilai yang boleh kamu atur pada input file adalah string kosong, dan begitulah tombol Clear mengosongkannya.

Kapan memilih yang mana

Pilih terkontrol saat layar harus merespons nilainya selama pengguna mengetik. Pilih tidak terkontrol saat kamu hanya butuh nilainya di akhir, dan begitu pula cara kerja form action di React 19: <form action={fn}> memberikan FormData ke fungsimu lalu mengatur ulang field yang tidak terkontrol sesudahnya.

Merender di setiap ketukan tombol terdengar mahal, tetapi untuk form biasa itu bukan masalah. Ini baru menjadi masalah saat tree yang besar dan lambat ikut dirender ulang bersama input itu; dalam kasus itu, simpan state dekat dengan input, atau pindahkan bagian yang lambat ke komponennya sendiri.

Dua istilah yang sama juga berlaku untuk komponen buatanmu. Komponen yang mendapat nilai dan onChange dari induknya lewat props dikontrol oleh induknya; komponen yang menyimpan state sendiri tidak terkontrol. Memindahkan state ke atas agar sebuah komponen menjadi terkontrol adalah inti dari lifting state up.