Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.
the path name to the form field value, and validation rules.
field properties, field and form state. UseControllerReturn
API • Demo
function Input(props) { const { field, fieldState, formState } = useController(props); return ( <div> <input {...field} placeholder={props.name} /> <p>{fieldState.isTouched && "Touched"}</p> <p>{formState.isSubmitted ? "submitted" : ""}</p> </div> );} Copy
function Input(props) { const { field, fieldState, formState } = useController(props); return ( <div> <input {...field} placeholder={props.name} /> <p>{fieldState.isTouched && "Touched"}</p> <p>{formState.isSubmitted ? "submitted" : ""}</p> </div> );}
Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.