Forms & Controlled Components Interview Questions

A controlled component is one where form data is controlled by React state. Every state change goes through setState, making React the single source of truth. Uncontrolled components store form data in the DOM itself using refs. Controlled components provide more control but require more code.

Use state to store input value and onChange handler to update it: const [value, setValue] = useState(''); return <input value={value} onChange={e => setValue(e.target.value)} />. The component controls the input's value at all times.

Prevent default form submission with e.preventDefault(), validate inputs before submission, handle async submission with loading states, provide user feedback, and implement proper error handling. Consider form state reset after successful submission.

Use an object in state with properties matching input names. Update using computed property names: setState({...formData, [e.target.name]: e.target.value}). Each input's name attribute should match the corresponding state property.

Approaches include: built-in HTML5 validation attributes, custom validation logic in state/handlers, validation libraries like Yup/Joi, form libraries like Formik/React Hook Form. Consider real-time validation vs submission validation.

File inputs are typically uncontrolled. Access files through e.target.files in onChange handler. Use FileReader for preview, FormData for upload. Handle multiple files, validation, and upload progress. Consider drag-and-drop functionality.

Consider debouncing for frequent updates, batch state updates when possible, use memoization for expensive validations, optimize re-renders with proper component structure. Balance real-time validation with performance.

Create components that accept value and onChange props, maintain internal state if needed, properly handle user interactions, and implement proper event handling. Ensure compatibility with form libraries and validation.

Use nested objects in state, implement proper update logic for nested fields, consider using libraries for complex state updates. Example: setState({...form, address: {...form.address, street: value}}). Handle array fields appropriately.

Maintain overall form state across steps, validate each step independently, handle navigation between steps, persist partial data. Consider using reducers for complex state management and proper error handling.

Store errors in state, display field-specific and form-level errors, implement proper error clearing, handle async validation errors. Consider accessibility and user experience in error presentation.

Use localStorage/sessionStorage to save form state, implement auto-save functionality, handle form recovery on page reload. Consider cleaning up saved data and handling version conflicts.

Maintain array of fields in state, implement add/remove field functionality, handle validation for dynamic fields. Consider performance implications and proper state updates for array manipulations.

Use proper HTML form elements, implement proper labeling, handle keyboard navigation, provide error feedback for screen readers. Follow ARIA guidelines and implement proper focus management.

Implement proper reset functionality, handle defaultValue vs value props, consider partial form reset. Handle initialization from props or external data sources. Manage reset for nested and dynamic fields.

Update dependent fields based on other field values, handle validation dependencies, implement proper state updates. Consider performance and user experience in field updates.

Implement debounced validation calls, handle loading states, cache validation results when appropriate. Consider race conditions and cancellation of pending validation requests.

Use FormData for file uploads, handle upload progress, implement proper error handling and retry logic. Consider chunked uploads for large files and proper cleanup of file references.

Test form submission, validation logic, error states, and user interactions. Mock async operations, test accessibility features, and verify form state management. Consider edge cases and error scenarios.

Implement proper label and error message translations, handle different date/number formats, consider right-to-left languages. Use proper localization libraries and handle cultural differences.

Implement debounced save function, handle save states and errors, provide user feedback. Consider conflict resolution and offline capabilities. Handle cleanup of autosave timers.

Implement proper actions and reducers for form state, handle form namespacing, consider performance implications. Balance local vs global state for form data.

Implement virtualization for large lists, optimize validation runs, use proper memoization. Consider chunking large forms and implementing progressive loading.

Handle controlled component behavior, implement proper keyboard navigation, manage dropdown state and positioning. Consider accessibility and mobile device support.

Implement exponential backoff, handle different error types, maintain submission state. Consider user feedback during retries and proper cleanup of retry attempts.

Implement input masks for specific formats, handle cursor position, maintain raw and formatted values. Consider copy/paste behavior and proper validation of masked inputs.

Implement CSRF protection, validate inputs server-side, handle sensitive data properly, prevent XSS attacks. Consider authentication state and proper permissions checking.

Track form interactions, completion rates, error frequencies, and submission patterns. Consider privacy implications and proper data anonymization. Implement proper cleanup of tracking handlers.

Handle initial form state hydration, prevent flash of uncontrolled inputs, implement proper client-side validation initialization. Consider SEO implications and performance optimization.