Formularze i Controlled Components
Controlled components, uncontrolled components, walidacja formularzy, React Hook Form, obsługa submit
1Czym jest controlled component w React?
Czym jest controlled component w React?
Odpowiedź
Controlled component to element formularza, którego wartość jest zarządzana przez state React poprzez prop value i handler onChange. Oznacza to, że React staje się jedynym źródłem prawdy dla tych danych. W przeciwieństwie do uncontrolled components, gdzie DOM przechowuje własną wartość, controlled components zapewniają pełną kontrolę nad danymi formularza i ułatwiają walidację w czasie rzeczywistym.
2Jak stworzyć controlled input w React?
Jak stworzyć controlled input w React?
Odpowiedź
Controlled input wymaga dwóch niezbędnych elementów: prop value powiązanej ze state React oraz handlera onChange do aktualizacji tego state. Bez onChange input byłby tylko do odczytu, ponieważ React uniemożliwiłby jakąkolwiek modyfikację. To podejście zapewnia, że state React pozostaje zsynchronizowany z wyświetlaną wartością input, umożliwiając natychmiastową walidację lub transformację danych.
3Jaka jest różnica między controlled component a uncontrolled component?
Jaka jest różnica między controlled component a uncontrolled component?
Odpowiedź
Fundamentalna różnica polega na źródle prawdy dla danych. Controlled component przechowuje swoją wartość w state React (jedyne źródło prawdy), podczas gdy uncontrolled component pozwala DOM zarządzać własną wartością, dostępną przez ref. Controlled components oferują większą kontrolę i ułatwiają walidację w czasie rzeczywistym, ale uncontrolled components mogą być prostsze dla podstawowych formularzy bez złożonej walidacji.
Jak zarządzać wieloma controlled input w tym samym formularzu?
Jak stworzyć controlled checkbox w React?
+17 pytań z rozmów
Inne tematy rekrutacyjne React / Next.js
Podstawy JavaScript
Podstawy React
React Hooks
Cykl życia komponentu
React Router
Zarządzanie stanem z Context
Pobieranie danych i API
React Query (TanStack Query)
Styling & CSS-in-JS
Podstawy Next.js
TypeScript z React
Pobieranie danych w Next.js
Server Actions w Next.js
Routing i Nawigacja w Next.js
API Routes w Next.js
Metadata & SEO w Next.js
Middleware i Auth w Next.js
Testowanie React
Zustand State Management
Optymalizacja wydajności React
Error Boundaries & Error Handling
Advanced React Patterns
Zaawansowane funkcje Next.js
Wdrożenie i Produkcja Next.js
Architecture & Design Patterns
React Server Components
Internacjonalizacja Next.js
React Bezpieczeństwo & Najlepsze Praktyki
Opanuj React / Next.js na następną rozmowę
Uzyskaj dostęp do wszystkich pytań, flashcards, testów technicznych, ćwiczeń code review i symulatorów rozmów.
Zacznij za darmo