RF Flashcards
forms
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.
What does the handleSubmit method do in React Hook Form?
It handles the form submission and validation, calling onSubmit and onError.
What does the formState object include in React Hook Form?
It includes states like isDirty, isValid, errors, touchedFields, etc.
What is isDirty in React Hook Form?
A boolean indicating if any field in the form has been modified.
What is isTouched in React Hook Form?
A boolean indicating if a field has been interacted with.
What does isValid represent in React Hook Form?
A boolean indicating if the form passes all validation rules.
When does form validation trigger with onBlur mode in React Hook Form?
Validation triggers when an input field loses focus.
When does form validation trigger with onChange mode in React Hook Form?
Validation triggers as soon as the input value changes.
When does form validation trigger with onSubmit mode in React Hook Form?
Validation triggers when the form is submitted.
What is the reValidateMode in React Hook Form?
It determines when re-validation should occur after a field’s validation fails.
What is the defaultValues option in React Hook Form?
It specifies the initial values of the form fields.
What does the errors object contain in React Hook Form?
It contains validation error messages for each field.
What does the clearErrors method do in React Hook Form?
It clears validation errors for specified fields.
What does the setError method do in React Hook Form?
It manually sets a validation error for a specific field.
What does the reset method do in React Hook Form?
It resets the form fields to their default values and clears errors.
What is dirtyTouchedValidate used for in forms?
It marks a field as touched and triggers validation.
{ shouldDirty: true, shouldTouch: true, shouldValidate: true };
Why is dirtyTouchedValidate important?
It ensures fields are validated and errors are shown after user interaction.
What is the validate function used for in form fields?
It provides custom validation logic for a specific field.
What does the trigger method do in React Hook Form?
It manually triggers validation for specific fields.
What is touchedFields in formState?
An object that tracks which fields have been interacted with.
How does getValues work in React Hook Form?
It retrieves the current values of the form fields.
What is errors used for in React Hook Form?
To access and display validation error messages for form fields.
What does mode: ‘onBlur’ do in useForm?
It sets the validation mode to trigger on input blur events.
What does mode: ‘onChange’ do in useForm?
It sets the validation mode to trigger on input change events.
What does mode: ‘onSubmit’ do in useForm?
It sets the validation mode to trigger on form submission.
How is resolver used in useForm?
To connect a validation library like Zod to handle form validation.
