Tại sao Form của bạn chậm? React Hook Form là cứu tinh

// ❌ BAD: The Performance Killer
export function SlowForm() {
  const [values, setValues] = useState({ name: '', email: '', note: '' });

  // Mỗi lần gõ 1 phím -> Gọi setValues -> Trigger Re-render toàn bộ Component
  // Nếu Component này chứa 50 input con -> Cả 50 input con đều bị Re-render
  const handleChange = (e) => {
    setValues(prev => ({ ...prev, [e.target.name]: e.target.value }));
  };

  return (
    <form>
      <input name="name" value={values.name} onChange={handleChange} />
      <HeavyComponent /> {/* Bị re-render oan uổng */}
    </form>
  );
}

// ✅ GOOD: Zero Re-render
export function FastForm() {
  const { register, handleSubmit } = useForm();
  
  // Component này chỉ render ĐÚNG 1 LẦN khi mount.
  // Gõ phím thoải mái, component vẫn đứng im.
  console.log("Render Count"); 

  const onSubmit = (data) => console.log(data); // Chỉ lấy data khi Submit

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} /> {/* Đăng ký Ref ngầm */}
      <HeavyComponent /> {/* An toàn tuyệt đối */}
      <button>Submit</button>
    </form>
  );
}

// ❌ SAI LẦM: Làm mất hết tác dụng của RHF
function WrongUsage() {
  const { register, watch } = useForm();
  
  // Lắng nghe thay đổi của name để hiện thông báo
  // -> Mỗi lần name đổi -> Root Component re-render -> Lại lôi theo cả form re-render
  const name = watch("name"); 

  return (
    <form>
      <input {...register("name")} />
      <p>Hello {name}</p>
      <HeavyComponent /> {/* Vẫn bị re-render! */}
    </form>
  );
}

// ✅ TỐI ƯU: Chỉ component bé tí này re-render
function NamePreview({ control }) {
  const name = useWatch({ control, name: "name" }); // Hook chuyên biệt
  return <p>Hello {name}</p>;
}

function OptimalForm() {
  const { register, control } = useForm();
  
  return (
    <form>
      <input {...register("name")} />
      
      {/* Component này re-render liên tục (nhẹ) */}
      <NamePreview control={control} /> 
      
      {/* Component này KHÔNG BAO GIỜ re-render (nặng) */}
      <HeavyComponent /> 
    </form>
  );
}

const { formState: { errors } } = useForm();
// Chỉ khi bạn destructure { errors } ra, RHF mới bắt đầu tracking validation state.
// Nếu bạn xóa chữ `errors` đi, form sẽ chạy nhanh hơn nữa!