Форми та Controlled Components
Controlled components, uncontrolled components, валідація форм, React Hook Form, обробка submit
1Що таке controlled component у React?
Що таке controlled component у React?
Відповідь
Controlled component — це елемент форми, значення якого керується станом React через prop value та обробник onChange. Це означає, що React стає єдиним джерелом істини для цих даних. На відміну від uncontrolled components, де DOM зберігає власне значення, controlled components забезпечують повний контроль над даними форми та спрощують валідацію в реальному часі.
2Як створити controlled input у React?
Як створити controlled input у React?
Відповідь
Controlled input потребує двох необхідних елементів: prop value, прив'язаної до стану React, та обробника onChange для оновлення цього стану. Без onChange input буде доступним лише для читання, оскільки React запобігатиме будь-яким змінам. Цей підхід гарантує, що стан React залишається синхронізованим зі значенням, яке відображається в input, що дозволяє миттєву валідацію або перетворення даних.
3Яка різниця між controlled component та uncontrolled component?
Яка різниця між controlled component та uncontrolled component?
Відповідь
Фундаментальна різниця полягає в джерелі істини для даних. Controlled component зберігає своє значення в стані React (єдине джерело істини), тоді як uncontrolled component дозволяє DOM керувати власним значенням, доступним через ref. Controlled components пропонують більше контролю та спрощують валідацію в реальному часі, але uncontrolled components можуть бути простішими для базових форм без складної валідації.
Як керувати кількома controlled input в одній формі?
Як створити controlled checkbox у React?
+17 питань зі співбесід
Інші теми співбесід React / Next.js
Основи JavaScript
Основи React
React Hooks
Життєвий цикл компонента
React Router
Управління станом з Context
Отримання даних та API
React Query (TanStack Query)
Styling & CSS-in-JS
Основи Next.js
TypeScript з React
Data Fetching у Next.js
Server Actions у Next.js
Маршрутизація та Навігація в Next.js
API Routes у Next.js
Metadata & SEO у Next.js
Middleware та Auth у Next.js
Тестування React
Zustand State Management
Оптимізація продуктивності React
Error Boundaries & обробка помилок
Advanced React Patterns
Розширені можливості Next.js
Розгортання та Продакшн Next.js
Architecture & Design Patterns
React Server Components
Інтернаціоналізація Next.js
React Безпека & Найкращі Практики
Опануй React / Next.js для наступної співбесіди
Отримай доступ до всіх питань, flashcards, технічних тестів, вправ code review та симуляторів співбесід.
Почни безкоштовно