Hero Hook Form API / useDebouncedFieldValidation

Function: useDebouncedFieldValidation()

useDebouncedFieldValidation<T>(form, fieldName, options?): object

Defined in: hooks/useDebouncedValidation.ts:180

Hook for debouncing validation of a single field.

Type Parameters

T

T extends Record<string, any>

The form data type

Parameters

form

UseFormReturn<T>

React Hook Form instance

fieldName

keyof T

Name of the field to debounce

options?

Configuration options

delay?

number

Delay in milliseconds before validation

enabled?

boolean

Whether debouncing is enabled

Returns

object

Debounced field validation utilities

debouncedFieldTrigger()

debouncedFieldTrigger: () => void

Returns

void

isDebouncing

isDebouncing: boolean = !!timeoutRef.current

Description

Similar to useDebouncedValidation but optimized for a single field. Automatically triggers validation when the specified field changes.

Example


import { useDebouncedFieldValidation } from "@rachelallyson/hero-hook-form";
import { useForm } from "react-hook-form";
 
function MyForm() {
  const form = useForm();
  const { debouncedFieldTrigger, isDebouncing } = useDebouncedFieldValidation(
    form,
    "email",
    { delay: 500 }
  );
 
  return (
    <input
      {...form.register("email")}
      onChange={(e) => {
        form.setValue("email", e.target.value);
        debouncedFieldTrigger();
      }}
    />
  );
}

See

useDebouncedValidation for multiple fields