Formularios y Controlled Components
Controlled components, uncontrolled components, validación de formularios, React Hook Form, manejo de submit
1¿Qué es un controlled component en React?
¿Qué es un controlled component en React?
Respuesta
Un controlled component es un elemento de formulario cuyo valor es gestionado por el estado de React a través de la prop value y un handler onChange. Esto significa que React se convierte en la fuente única de verdad para estos datos. A diferencia de los uncontrolled components, donde el DOM mantiene su propio valor, los controlled components brindan control total sobre los datos del formulario y facilitan la validación en tiempo real.
2¿Cómo crear un input controlado en React?
¿Cómo crear un input controlado en React?
Respuesta
Un controlled input requiere dos elementos esenciales: la prop value vinculada al estado de React y un handler onChange para actualizar ese estado. Sin onChange, el input sería de solo lectura ya que React impediría cualquier modificación. Este enfoque garantiza que el estado de React se mantenga sincronizado con el valor mostrado en el input, permitiendo la validación inmediata o la transformación de los datos ingresados.
3¿Cuál es la diferencia entre un controlled component y un uncontrolled component?
¿Cuál es la diferencia entre un controlled component y un uncontrolled component?
Respuesta
La diferencia fundamental radica en la fuente de verdad de los datos. Un controlled component almacena su valor en el estado de React (fuente única de verdad), mientras que un uncontrolled component deja que el DOM gestione su propio valor, accesible mediante una ref. Los controlled components ofrecen más control y facilitan la validación en tiempo real, pero los uncontrolled components pueden ser más simples para formularios básicos sin validación compleja.
¿Cómo gestionar múltiples controlled inputs en el mismo formulario?
¿Cómo crear un checkbox controlado en React?
+17 preguntas de entrevista
Otros temas de entrevista React / Next.js
Fundamentos de JavaScript
Fundamentos de React
React Hooks
Ciclo de vida de los componentes
React Router
Gestión de estado con Context
Obtención de datos y API
React Query (TanStack Query)
Styling & CSS-in-JS
Fundamentos de Next.js
TypeScript con React
Data Fetching en Next.js
Server Actions de Next.js
Routing y Navegación en Next.js
API Routes de Next.js
Metadata & SEO en Next.js
Middleware y Auth en Next.js
Testing en React
Zustand State Management
Optimización de Rendimiento en React
Error Boundaries & Error Handling
Advanced React Patterns
Características avanzadas de Next.js
Despliegue y Producción de Next.js
Architecture & Design Patterns
React Server Components
Internacionalización de Next.js
React Security & Buenas Prácticas
Domina React / Next.js para tu próxima entrevista
Accede a todas las preguntas, flashcards, tests técnicos, ejercicios de code review y simuladores de entrevista.
Empieza gratis