Hero Hook Form API / useDebouncedValidation

Function: useDebouncedValidation()

useDebouncedValidation<T>(form, options?): object

Defined in: hooks/useDebouncedValidation.ts:67

Hook for debouncing form validation to improve performance.

Type Parameters

T

T extends FieldValues

The form data type

Parameters

form

UseFormReturn<T>

React Hook Form instance

options?

UseDebouncedValidationOptions<T> = {}

Configuration options

Returns

object

Debounced validation utilities

debouncedTrigger()

debouncedTrigger: () => void

Returns

void

isDebouncing

isDebouncing: boolean = !!timeoutRef.current

Description

Delays validation until the user stops typing, reducing unnecessary validation calls and improving form performance. Useful for forms with expensive validation logic or many fields.

Example


import { useDebouncedValidation } from "@rachelallyson/hero-hook-form";
import { useForm } from "react-hook-form";
 
function MyForm() {
  const form = useForm();
  const { debouncedTrigger, isDebouncing } = useDebouncedValidation(form, {
    delay: 500,
    fields: ["email", "username"], // Only watch these fields
  });
 
  return (
    <form>
      <input
        {...form.register("email")}
        onChange={(e) => {
          form.setValue("email", e.target.value);
          debouncedTrigger();
        }}
      />
      {isDebouncing && <span>Validating...</span>}
    </form>
  );
}

See

useDebouncedFieldValidation for single field debouncing