Formulaires & Composants contrôlés
Controlled components, uncontrolled components, form validation, React Hook Form, submit handling
1Qu'est-ce qu'un composant contrôlé (controlled component) en React ?
Qu'est-ce qu'un composant contrôlé (controlled component) en React ?
Réponse
Un composant contrôlé est un élément de formulaire dont la valeur est gérée par l'état React via la prop value et un gestionnaire onChange. Cela signifie que React devient la source unique de vérité pour cette donnée. Contrairement aux composants non contrôlés où le DOM maintient sa propre valeur, les composants contrôlés permettent un contrôle total sur les données du formulaire et facilitent la validation en temps réel.
2Comment créer un input contrôlé en React ?
Comment créer un input contrôlé en React ?
Réponse
Un input contrôlé nécessite deux éléments essentiels : la prop value liée à l'état React et un gestionnaire onChange pour mettre à jour cet état. Sans onChange, l'input serait en lecture seule car React empêcherait toute modification. Cette approche garantit que l'état React reste synchronisé avec la valeur affichée dans l'input, permettant ainsi une validation immédiate ou une transformation des données saisies.
3Quelle est la différence entre un composant contrôlé et un composant non contrôlé ?
Quelle est la différence entre un composant contrôlé et un composant non contrôlé ?
Réponse
La différence fondamentale réside dans la source de vérité des données. Un composant contrôlé stocke sa valeur dans l'état React (source unique de vérité), tandis qu'un composant non contrôlé laisse le DOM gérer sa propre valeur, accessible via une ref. Les composants contrôlés offrent plus de contrôle et facilitent la validation en temps réel, mais les composants non contrôlés peuvent être plus simples pour des formulaires basiques sans validation complexe.
Comment gérer plusieurs inputs contrôlés dans un même formulaire ?
Comment créer une checkbox contrôlée en React ?
+17 questions d'entretien
Autres sujets d'entretien React / Next.js
Les bases de JavaScript
Fondamentaux React
React Hooks
Cycle de vie des composants
React Router
Gestion d'état avec Context
Fetching de données & API
React Query (TanStack Query)
Styling & CSS-in-JS
Fondamentaux Next.js
TypeScript avec React
Data Fetching Next.js
Server Actions Next.js
Routing & Navigation Next.js
API Routes Next.js
Metadata & SEO Next.js
Middleware & Auth Next.js
Testing React
Zustand State Management
Optimisation Performance React
Error Boundaries & Error Handling
Advanced React Patterns
Fonctionnalités avancées Next.js
Déploiement & Production Next.js
Architecture & Design Patterns
React Server Components
Internationalisation Next.js
Sécurité & Best Practices React
Maîtrise React / Next.js pour ton prochain entretien
Accède à toutes les questions, flashcards, tests techniques, exercices de code review et simulateurs d'entretien.
Commencer gratuitement