# Форми та Controlled Components (React / Next.js)

> Controlled components, uncontrolled components, валідація форм, React Hook Form, обробка submit

- 20 питань зі співбесід
- Mid-Level
- [Питання зі співбесід: React / Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy.md)

## 1. Що таке controlled component у React?

**Відповідь**

Controlled component — це елемент форми, значення якого керується станом React через prop value та обробник onChange. Це означає, що React стає єдиним джерелом істини для цих даних. На відміну від uncontrolled components, де DOM зберігає власне значення, controlled components забезпечують повний контроль над даними форми та спрощують валідацію в реальному часі.

## 2. Як створити controlled input у React?

**Відповідь**

Controlled input потребує двох необхідних елементів: prop value, прив'язаної до стану React, та обробника onChange для оновлення цього стану. Без onChange input буде доступним лише для читання, оскільки React запобігатиме будь-яким змінам. Цей підхід гарантує, що стан React залишається синхронізованим зі значенням, яке відображається в input, що дозволяє миттєву валідацію або перетворення даних.

## 3. Яка різниця між controlled component та uncontrolled component?

**Відповідь**

Фундаментальна різниця полягає в джерелі істини для даних. Controlled component зберігає своє значення в стані React (єдине джерело істини), тоді як uncontrolled component дозволяє DOM керувати власним значенням, доступним через ref. Controlled components пропонують більше контролю та спрощують валідацію в реальному часі, але uncontrolled components можуть бути простішими для базових форм без складної валідації.

## Ще 17 доступних питань

- Як керувати кількома controlled input в одній формі?
- Як створити controlled checkbox у React?

Зареєструйся безкоштовно: https://sharpskill.dev/uk/login

## Інші теми співбесід React / Next.js

- [Основи JavaScript](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/javascript-essentials.md): 25 запитань, Junior
- [Основи React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-fundamentals.md): 20 запитань, Junior
- [React Hooks](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-hooks.md): 22 запитань, Junior
- [Життєвий цикл компонента](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/component-lifecycle.md): 18 запитань, Junior
- [React Router](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-router.md): 20 запитань, Junior
- [Управління станом з Context](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/state-management-context.md): 18 запитань, Junior
- [Отримання даних та API](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/fetching-data-api.md): 20 запитань, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-query-tanstack.md): 20 запитань, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/styling-css-in-js.md): 18 запитань, Mid-Level
- [Основи Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-fundamentals.md): 25 запитань, Mid-Level
- [TypeScript з React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/typescript-react.md): 20 запитань, Mid-Level
- [Data Fetching у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-data-fetching.md): 24 запитань, Mid-Level
- [Server Actions у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-server-actions.md): 20 запитань, Mid-Level
- [Маршрутизація та Навігація в Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-routing-navigation.md): 22 запитань, Mid-Level
- [API Routes у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-api-routes.md): 20 запитань, Mid-Level
- [Metadata & SEO у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-metadata-seo.md): 18 запитань, Mid-Level
- [Middleware та Auth у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-middleware-auth.md): 22 запитань, Mid-Level
- [Тестування React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-testing.md): 20 запитань, Mid-Level
- [Zustand State Management](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/zustand-state-management.md): 18 запитань, Mid-Level
- [Оптимізація продуктивності React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-performance-optimization.md): 22 запитань, Senior
- [Error Boundaries & обробка помилок](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-error-boundaries.md): 18 запитань, Senior
- [Advanced React Patterns](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/advanced-react-patterns.md): 20 запитань, Senior
- [Розширені можливості Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-advanced-features.md): 24 запитань, Senior
- [Розгортання та Продакшн Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-deployment-production.md): 20 запитань, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-architecture-patterns.md): 22 запитань, Senior
- [React Server Components](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-server-components.md): 26 запитань, Senior
- [Інтернаціоналізація Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-internationalization.md): 20 запитань, Senior
- [React Безпека & Найкращі Практики](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-security-best-practices.md): 22 запитань, Senior

---

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