Working with Forms Flashcards
What are controlled fields in React forms?
Fields with values stored in state, requiring more code, and potentially causing performance issues due to re-renders on input.
What are the performance issues of controlled fields in React forms?
Re-renders on every character input, which can be significant in large forms.
What are uncontrolled fields in React forms?
Fields where values are not controlled by state, and values are retrieved using browser’s native features.
What is the purpose of the name attribute in uncontrolled fields?
It extracts field values in the form submit handler.
What is the role of the onSubmit
event in React forms?
It is triggered when the form is submitted.
What is FormData
in React?
An interface to access form values, using the form element as its constructor input.
What is React Hook Form used for?
It is a library for handling forms in React, providing hooks and state management for form data.
What does the useForm
hook return in React Hook Form?
It returns functions and state, including validation and submission status, with a generic type parameter for form data.
What does the register
function in React Hook Form do?
It registers a field with the form, handling field values, focus, and validation, and spreading handlers on the field editor.
How can you specify validation in React Hook Form?
By passing validation rules as options to the register function, including custom error messages.
How do you obtain validation errors in React Hook Form?
By accessing the errors state returned by useForm
, which contains field-specific error messages.
What does handleSubmit
do in React Hook Form?
It handles form submission after validation, calling the provided function on successful validation.
What does the isSubmitting
state in React Hook Form indicate?
It indicates whether the form is currently being submitted, useful for disabling form elements during submission.
What is the purpose of isSubmitSuccessful in React Hook Form?
It allows you to conditionally render a success message when the form submission is successful.