# Formulieren & Controlled Components (React / Next.js) > Controlled components, uncontrolled components, formuliervalidatie, React Hook Form, submit-afhandeling - 20 gespreksvragen - Mid-Level - [Gespreksvragen: React / Next.js](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen.md) ## 1. Wat is een controlled component in React? **Antwoord** Een controlled component is een formulierelement waarvan de waarde wordt beheerd door de React-state via de value-prop en een onChange-handler. Dit betekent dat React de enige bron van waarheid wordt voor deze data. In tegenstelling tot uncontrolled components, waar het DOM zijn eigen waarde beheert, bieden controlled components volledige controle over formuliergegevens en vergemakkelijken ze real-time validatie. ## 2. Hoe maak je een controlled input in React? **Antwoord** Een controlled input vereist twee essentiële elementen: de value-prop gebonden aan de React-state en een onChange-handler om die state bij te werken. Zonder onChange zou het invoerveld alleen-lezen zijn, omdat React elke wijziging zou blokkeren. Deze aanpak zorgt ervoor dat de React-state gesynchroniseerd blijft met de weergegeven invoerwaarde, wat directe validatie of datatransformatie mogelijk maakt. ## 3. Wat is het verschil tussen een controlled component en een uncontrolled component? **Antwoord** Het fundamentele verschil ligt in de bron van waarheid voor de data. Een controlled component slaat zijn waarde op in de React-state (enige bron van waarheid), terwijl een uncontrolled component het DOM zijn eigen waarde laat beheren, toegankelijk via een ref. Controlled components bieden meer controle en vergemakkelijken real-time validatie, maar uncontrolled components kunnen eenvoudiger zijn voor basisformulieren zonder complexe validatie. ## Nog 17 vragen beschikbaar - Hoe beheer je meerdere controlled inputs in hetzelfde formulier? - Hoe maak je een controlled checkbox in React? Meld je gratis aan: https://sharpskill.dev/nl/login ## Andere React / Next.js-sollicitatieonderwerpen - [JavaScript-basisbegrippen](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/javascript-essentials.md): 25 vragen, Junior - [React-basisbegrippen](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-fundamentals.md): 20 vragen, Junior - [React Hooks](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-hooks.md): 22 vragen, Junior - [Componentlevenscyclus](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/component-lifecycle.md): 18 vragen, Junior - [React Router](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-router.md): 20 vragen, Junior - [Statusbeheer met Context](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/state-management-context.md): 18 vragen, Junior - [Gegevens ophalen & API](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/fetching-data-api.md): 20 vragen, Mid-Level - [React Query (TanStack Query)](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-query-tanstack.md): 20 vragen, Mid-Level - [Styling & CSS-in-JS](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/styling-css-in-js.md): 18 vragen, Mid-Level - [Next.js Fundamentals](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-fundamentals.md): 25 vragen, Mid-Level - [TypeScript met React](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/typescript-react.md): 20 vragen, Mid-Level - [Next.js Data Fetching](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-data-fetching.md): 24 vragen, Mid-Level - [Next.js Server Actions](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-server-actions.md): 20 vragen, Mid-Level - [Routing & Navigatie in Next.js](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-routing-navigation.md): 22 vragen, Mid-Level - [Next.js API Routes](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-api-routes.md): 20 vragen, Mid-Level - [Next.js Metadata & SEO](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-metadata-seo.md): 18 vragen, Mid-Level - [Next.js Middleware & Auth](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-middleware-auth.md): 22 vragen, Mid-Level - [React Testen](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-testing.md): 20 vragen, Mid-Level - [Zustand State Management](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/zustand-state-management.md): 18 vragen, Mid-Level - [React Performance-optimalisatie](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-performance-optimization.md): 22 vragen, Senior - [Error Boundaries & Error Handling](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-error-boundaries.md): 18 vragen, Senior - [Advanced React Patterns](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/advanced-react-patterns.md): 20 vragen, Senior - [Geavanceerde Next.js-functies](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-advanced-features.md): 24 vragen, Senior - [Next.js Deployment & Productie](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-deployment-production.md): 20 vragen, Senior - [Architecture & Design Patterns](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-architecture-patterns.md): 22 vragen, Senior - [React Server Components](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-server-components.md): 26 vragen, Senior - [Next.js Internationalisering](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-internationalization.md): 20 vragen, Senior - [React Beveiliging & Best Practices](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-security-best-practices.md): 22 vragen, Senior --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/forms-controlled-components