Form & Controlled Components
Controlled components, uncontrolled components, validasi form, React Hook Form, penanganan submit
1Apa itu controlled component di React?
Apa itu controlled component di React?
Jawaban
Controlled component adalah elemen form yang nilainya dikelola oleh state React melalui prop value dan handler onChange. Ini berarti React menjadi satu-satunya sumber kebenaran untuk data tersebut. Berbeda dengan uncontrolled components di mana DOM mempertahankan nilainya sendiri, controlled components memberikan kontrol penuh atas data form dan memudahkan validasi secara real-time.
2Bagaimana cara membuat controlled input di React?
Bagaimana cara membuat controlled input di React?
Jawaban
Controlled input membutuhkan dua elemen penting: prop value yang terikat pada state React dan handler onChange untuk memperbarui state tersebut. Tanpa onChange, input akan menjadi read-only karena React akan mencegah modifikasi apa pun. Pendekatan ini memastikan state React tetap sinkron dengan nilai input yang ditampilkan, memungkinkan validasi langsung atau transformasi data.
3Apa perbedaan antara controlled component dan uncontrolled component?
Apa perbedaan antara controlled component dan uncontrolled component?
Jawaban
Perbedaan mendasar terletak pada sumber kebenaran data. Controlled component menyimpan nilainya di state React (satu-satunya sumber kebenaran), sementara uncontrolled component membiarkan DOM mengelola nilainya sendiri, yang dapat diakses melalui ref. Controlled components menawarkan lebih banyak kontrol dan memudahkan validasi real-time, tetapi uncontrolled components bisa lebih sederhana untuk form dasar tanpa validasi kompleks.
Bagaimana cara mengelola beberapa controlled input dalam satu form?
Bagaimana cara membuat controlled checkbox di React?
+17 pertanyaan wawancara
Topik wawancara React / Next.js lainnya
Dasar-Dasar JavaScript
Dasar-Dasar React
React Hooks
Siklus hidup komponen
React Router
Manajemen state dengan Context
Pengambilan Data & API
React Query (TanStack Query)
Styling & CSS-in-JS
Dasar-dasar Next.js
TypeScript dengan React
Data Fetching Next.js
Server Actions Next.js
Routing & Navigasi Next.js
API Routes Next.js
Metadata & SEO di Next.js
Middleware & Auth di Next.js
Pengujian React
Zustand State Management
Optimasi Performa React
Error Boundaries & Error Handling
Advanced React Patterns
Fitur Lanjutan Next.js
Deployment & Produksi Next.js
Architecture & Design Patterns
React Server Components
Internasionalisasi Next.js
Keamanan React & Praktik Terbaik
Kuasai React / Next.js untuk wawancara berikutnya
Akses semua pertanyaan, flashcards, tes teknis, latihan code review dan simulator wawancara.
Mulai gratis