# Form e Controlled Components (React / Next.js)

> Controlled components, uncontrolled components, validazione dei form, React Hook Form, gestione del submit

- 20 domande da colloquio
- Mid-Level
- [Domande da colloquio: React / Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio.md)

## 1. Cos'è un controlled component in React?

**Risposta**

Un controlled component è un elemento di form il cui valore è gestito dallo state di React tramite la prop value e un handler onChange. Questo significa che React diventa l'unica fonte di verità per questi dati. A differenza degli uncontrolled components, dove il DOM mantiene il proprio valore, i controlled components offrono il pieno controllo sui dati del form e facilitano la validazione in tempo reale.

## 2. Come creare un controlled input in React?

**Risposta**

Un controlled input richiede due elementi essenziali: la prop value legata allo state di React e un handler onChange per aggiornare quello state. Senza onChange, l'input sarebbe in sola lettura poiché React impedirebbe qualsiasi modifica. Questo approccio garantisce che lo state di React rimanga sincronizzato con il valore visualizzato nell'input, consentendo la validazione immediata o la trasformazione dei dati.

## 3. Qual è la differenza tra un controlled component e un uncontrolled component?

**Risposta**

La differenza fondamentale risiede nella fonte di verità per i dati. Un controlled component memorizza il suo valore nello state di React (fonte unica di verità), mentre un uncontrolled component lascia che il DOM gestisca il proprio valore, accessibile tramite una ref. I controlled components offrono più controllo e facilitano la validazione in tempo reale, ma gli uncontrolled components possono essere più semplici per form di base senza validazione complessa.

## Altre 17 domande disponibili

- Come gestire più controlled input nello stesso form?
- Come creare un controlled checkbox in React?

Registrati gratis: https://sharpskill.dev/it/login

## Altri argomenti di colloquio React / Next.js

- [Fondamenti di JavaScript](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/javascript-essentials.md): 25 domande, Junior
- [Fondamenti di React](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-fundamentals.md): 20 domande, Junior
- [React Hooks](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-hooks.md): 22 domande, Junior
- [Ciclo di vita dei componenti](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/component-lifecycle.md): 18 domande, Junior
- [React Router](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-router.md): 20 domande, Junior
- [Gestione dello state con Context](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/state-management-context.md): 18 domande, Junior
- [Recupero dati e API](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/fetching-data-api.md): 20 domande, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-query-tanstack.md): 20 domande, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/styling-css-in-js.md): 18 domande, Mid-Level
- [Fondamentali di Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-fundamentals.md): 25 domande, Mid-Level
- [TypeScript con React](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/typescript-react.md): 20 domande, Mid-Level
- [Data Fetching in Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-data-fetching.md): 24 domande, Mid-Level
- [Server Actions di Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-server-actions.md): 20 domande, Mid-Level
- [Routing e Navigazione in Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-routing-navigation.md): 22 domande, Mid-Level
- [API Routes di Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-api-routes.md): 20 domande, Mid-Level
- [Metadata & SEO in Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-metadata-seo.md): 18 domande, Mid-Level
- [Middleware e Auth in Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-middleware-auth.md): 22 domande, Mid-Level
- [Testing React](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-testing.md): 20 domande, Mid-Level
- [Zustand State Management](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/zustand-state-management.md): 18 domande, Mid-Level
- [Ottimizzazione delle Performance React](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-performance-optimization.md): 22 domande, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-error-boundaries.md): 18 domande, Senior
- [Advanced React Patterns](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/advanced-react-patterns.md): 20 domande, Senior
- [Funzionalità avanzate di Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-advanced-features.md): 24 domande, Senior
- [Deploy e Produzione con Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-deployment-production.md): 20 domande, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-architecture-patterns.md): 22 domande, Senior
- [React Server Components](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-server-components.md): 26 domande, Senior
- [Internazionalizzazione di Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-internationalization.md): 20 domande, Senior
- [React Sicurezza & Best Practices](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-security-best-practices.md): 22 domande, Senior

---

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