use-field hook – manage single field state
The use-field hook is a simpler alternative to use-form . It can be used to manage the state of a single input without the need to create a form:
The use-field hook accepts the following options object as a single argument:
And returns the following object:
To validate the field on blur, set the validateOnBlur option to true :
To validate the field on change, set the validateOnChange option to true :
The validate option accepts both async and sync functions. In both cases, the function must return an error message that will be displayed to the user or null if the value is valid. To keep track of async validation state, use the isValidating property:
Async validation can be used with the validateOnBlur option, but it's not recommended with validateOnChange because it will trigger validation on every key press, which may lead to race conditions:
To get information about whether the field has been focused at least once, use the isTouched method. To check if the value has been changed from the initial value, use the isDirty method:
Touched: not touched
By default, the error message is cleared when the value changes. To disable this behavior, set the clearErrorOnChange option to false :
The uncontrolled mode of the use-field hook works similarly to the uncontrolled mode of use-form . In uncontrolled mode, rerenders are minimized and the input value is managed by the input itself. It is useful if you experience performance issues with controlled mode, but in most cases controlled mode is recommended as it always provides up-to-date field information as React state.