RF Flashcards
forms (49 cards)
How is the form created in React?
Using useForm from react-hook-form and wrapping the form in FormProvider.
What is the schema of the form?
It’s a Zod object defining the shape and validation rules of the form data.
How do you set default values for a form?
By passing a defaultValues object to useForm.
What are some methods available on the useForm object?
errors, control, setValue, watch, register, etc.
What is a controlled input in React?
An input element where the value is controlled by React state.
Why do we prefer controlled inputs?
They provide better control and validation over the input’s value.
Why is validation important in forms?
It prevents invalid data from being submitted and ensures data integrity.
When does onSubmit run in a form?
When the form is successfully submitted without validation errors.
When does onError run in a form?
When there are validation errors in the form submission.
What is the purpose of a toast notification in forms?
To provide feedback to the user, such as success or error messages.
How is data fetched and set in form dropdowns?
Using hooks to fetch data and setting options in state.
What is the role of useEffect in forms?
To perform side effects such as data fetching or updating state when dependencies change.
How is validation integrated with react-hook-form?
Using a resolver like zodResolver to link Zod schema with useForm.
What is FormProvider used for in React Hook Form?
To provide form context to nested components.
What does setValue do in useFormContext?
It updates the value of a specific form field.
What is the role of Controller in forms?
It wraps custom inputs and manages their state and validation.
How are validation errors displayed in forms?
Using the errors object from formState to conditionally render error messages.
What does the watch function do in useFormContext?
It monitors the value of a specific form field.
What does a function like setDropdownOptions do in forms on the dropdown components?
It sets the options for a dropdown based on fetched data.
How are nested components managed in forms?
By passing necessary props and using context providers like FormProvider.
What does the register method do in React Hook Form?
It registers an input field to the form with its validation rules.
What does the control object manage in React Hook Form?
It manages the state and validation of the form fields.
How is setValue used in React Hook Form?
It updates the value of a specific field programmatically.
What is the purpose of the watch method in React Hook Form?
To subscribe to field value changes and re-render the component when they change.
