# Formulaires & Composants contrôlés (React / Next.js)

> Controlled components, uncontrolled components, form validation, React Hook Form, submit handling

- 20 questions d'entretien
- Confirmé
- [Questions d'entretien: React / Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien.md)

## 1. 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.

## 2. 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.

## 3. 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.

## 17 questions supplémentaires disponibles

- Comment gérer plusieurs inputs contrôlés dans un même formulaire ?
- Comment créer une checkbox contrôlée en React ?

S'inscrire gratuitement: https://sharpskill.dev/fr/login

## Autres sujets d'entretien React / Next.js

- [Les bases de JavaScript](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/javascript-essentials.md): 25 questions, Junior
- [Fondamentaux React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-fundamentals.md): 20 questions, Junior
- [React Hooks](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-hooks.md): 22 questions, Junior
- [Cycle de vie des composants](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/component-lifecycle.md): 18 questions, Junior
- [React Router](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-router.md): 20 questions, Junior
- [Gestion d'état avec Context](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/state-management-context.md): 18 questions, Junior
- [Fetching de données & API](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/fetching-data-api.md): 20 questions, Confirmé
- [React Query (TanStack Query)](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-query-tanstack.md): 20 questions, Confirmé
- [Styling & CSS-in-JS](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/styling-css-in-js.md): 18 questions, Confirmé
- [Fondamentaux Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-fundamentals.md): 25 questions, Confirmé
- [TypeScript avec React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/typescript-react.md): 20 questions, Confirmé
- [Data Fetching Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-data-fetching.md): 24 questions, Confirmé
- [Server Actions Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-server-actions.md): 20 questions, Confirmé
- [Routing & Navigation Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-routing-navigation.md): 22 questions, Confirmé
- [API Routes Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-api-routes.md): 20 questions, Confirmé
- [Metadata & SEO Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-metadata-seo.md): 18 questions, Confirmé
- [Middleware & Auth Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-middleware-auth.md): 22 questions, Confirmé
- [Testing React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-testing.md): 20 questions, Confirmé
- [Zustand State Management](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/zustand-state-management.md): 18 questions, Confirmé
- [Optimisation Performance React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-performance-optimization.md): 22 questions, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-error-boundaries.md): 18 questions, Senior
- [Advanced React Patterns](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/advanced-react-patterns.md): 20 questions, Senior
- [Fonctionnalités avancées Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-advanced-features.md): 24 questions, Senior
- [Déploiement & Production Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-deployment-production.md): 20 questions, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-architecture-patterns.md): 22 questions, Senior
- [React Server Components](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-server-components.md): 26 questions, Senior
- [Internationalisation Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-internationalization.md): 20 questions, Senior
- [Sécurité & Best Practices React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-security-best-practices.md): 22 questions, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/fr/technologies/react-next/questions-entretien/forms-controlled-components