react-hook-form demo

import { Input } from "@/components/ui/input"; import { Controller, useForm } from "react-hook-form"; const UsernameInput: React.FC<{ value?: string; onChange?: (e?: any) => void; }> = ({ value, onChange }) => { console.log("re-render UsernameInput"); return ( <div> <label>UsernameInput</label> <Input type="text" value={value} onChange={onChange} /> </div> ); }; const MobileInput: React.FC<{ value?: string; onChange?: (e?: any) => void; }> = ({ value, onChange }) => { console.log("re-render MobileInput"); return ( <div> <label>MobileInput</label> <Input type="text" value={value} onChange={onChange} /> </div> ); }; const GmailInput: React.FC<{ value?: string; onChange?: (e?: any) => void; }> = ({ value, onChange }) => { console.log("re-render GmailInput"); return ( <div> <label>GmailInput</label> <Input type="text" value={value} onChange={onChange} /> </div> ); }; export const Demo003HookForm = () => { const form = useForm({ defaultValues: { username: "", mobile: "", gmail: "", }, }); return ( <div> <h2>Demo003HookForm.tsx</h2> <Controller name="username" control={form.control} rules={{ required: true }} render={({ field }) => ( <UsernameInput value={field.value} onChange={field.onChange} /> )} /> <Controller name="mobile" control={form.control} rules={{ required: true }} render={({ field }) => ( <MobileInput value={field.value} onChange={field.onChange} /> )} /> <Controller name="gmail" control={form.control} rules={{ required: true }} render={({ field }) => ( <GmailInput value={field.value} onChange={field.onChange} /> )} /> </div> ); };