63 lines
2.1 KiB
Markdown
63 lines
2.1 KiB
Markdown
---
|
|
title: Use delayError to Debounce Rapid Error Display
|
|
impact: MEDIUM
|
|
impactDescription: reduces UI flicker during fast typing validation
|
|
tags: valid, delayError, debounce, user-experience
|
|
---
|
|
|
|
## Use delayError to Debounce Rapid Error Display
|
|
|
|
When using `onChange` mode, errors appear and disappear rapidly as users type. Use `delayError` to add a small delay, preventing UI flicker while still providing timely feedback.
|
|
|
|
**Incorrect (errors flash rapidly during typing):**
|
|
|
|
```typescript
|
|
function SearchForm() {
|
|
const { register, formState: { errors } } = useForm({
|
|
mode: 'onChange',
|
|
})
|
|
|
|
return (
|
|
<form>
|
|
<input {...register('query', { minLength: 3 })} />
|
|
{errors.query && <span>Min 3 characters</span>} {/* Flashes on/off rapidly */}
|
|
</form>
|
|
)
|
|
}
|
|
```
|
|
|
|
**Correct (error display debounced):**
|
|
|
|
```typescript
|
|
function SearchForm() {
|
|
const { register, formState: { errors } } = useForm({
|
|
mode: 'onChange',
|
|
delayError: 300, // 300ms delay before showing errors
|
|
})
|
|
|
|
return (
|
|
<form>
|
|
<input {...register('query', { minLength: 3 })} />
|
|
{errors.query && <span>Min 3 characters</span>} {/* Appears after 300ms delay */}
|
|
</form>
|
|
)
|
|
}
|
|
```
|
|
|
|
**When to use:**
|
|
- Real-time validation with `onChange` mode
|
|
- Fields with character count requirements
|
|
- Search inputs with minimum length
|
|
|
|
**Opting a single `setValue` into the delay (7.82+):** `setValue` accepts `delayError`, but it is a **boolean** — it opts that call into the debounce, and the duration still comes from `useForm({ delayError })`. Passing a number is a type error, even though the 7.82.0 release notes show `delayError: 500`:
|
|
|
|
```typescript
|
|
const { setValue } = useForm({ mode: 'onChange', delayError: 300 })
|
|
|
|
setValue('query', suggestion, { shouldValidate: true, delayError: true }) // debounced by 300ms
|
|
```
|
|
|
|
Without a form-level `delayError`, `{ delayError: true }` on `setValue` has nothing to debounce with and the error appears immediately.
|
|
|
|
Reference: [useForm - delayError](https://react-hook-form.com/docs/useform) · [useForm - setValue](https://react-hook-form.com/docs/useform/setvalue)
|