Khác nhau giữa watch() vs useWatch() trong React Hook Form

Như các bạn đã biết React-hook-form là một thư viện giúp việc validation form đơn giản hơn.

Ở bài viết trước chúng ta đã tìm hiểu về useFormContext trong React Hook Form. Trong bài viết này chúng ta sẽ tìm hiểu về 2 method watch và useWatch. Đây là 2 method có thể khiến các bạn nhầm lẫn. Mình sẽ giải đáp giúp các bạn trong bài viết này nhé 😁👌.

Khác nhau giữa watch() vs useWatch() trong React Hook Form

Trước tiên để tìm hiểu về sự khác nhau giữa 2 method này. Các bạn nên đọc hướng dẫn về watch trong React Hook Form tại đây. Mình sẽ tóm tắt lại một số chức năng chúng của watch.

Watch() trong React Hook Form

Đây là method dùng để theo dõi sự thay đổi các field trong form.

Dưới đây là một ví dụ sử dụng watch():

import { useForm } from "react-hook-form";

function RHFInput({ register, watch, name }) {
  const watchAllFields = watch();

  console.log("watchAllFields", watchAllFields);

  return (
      <input
        type="text" 
        {...register(name, { required: true, maxLength: 50 })}
      />
  );
}

function App() {
  const { register, watch } = useForm();

  console.log("re-render");
  const watchFields = watch(["address", "name"]); // render lần đầu: [undefined, undefined]
  console.log(watchFields);

  return (
      <form>
        <label>Name</label>
        <RHFInput name="name" register={register} watch={watch} />
        <RHFInput name="address" register={register} watch={watch} />
      </form>
  );
}

Ở lần render đầu tiên console.log("watchAllFields", watchAllFields); sẽ trả giá trị {}, Tương tự với console.log(watchFields); sẽ trả về [undefined, undefined]. Lý do là chúng ta không set defaultValues trong useForm().

Khi nhập input, watch() trong component RHFInput sẽ trigger re-render tại root level (Nơi đặt useForm() - App) nên khi nhập input App sẽ re-render.

method này sẽ trigger re-render (render lại component) tại component cha tức là nếu sử dụng watch tại component con thì khi có sự thay đổi giá trị field thì watch sẽ trigger render lại component cha.

useWatch() trong React Hook Form

Đây là một method cũng tương tự như watch(), tuy nhiên chúng ta có thể tối ưu số lần re-render của component bằng cách sử dụng useWatch(). Cùng xem thử một ví dụ nhé 😁.

Mình sửa lại một chút ở ví dụ trên, thay vì dụng watch() chúng ta sẽ thay thế bằng useWWatch().

import { useForm, useWatch } from "react-hook-form";

function RHFInput({ register, watch, name, control }) {
  const watchAllFields = useWatch({ control }); // Theo dõi mọi thay đổi
  const watchField = useWatch({ control, name }); // Theo dõi một field cụ thể
  // console.log("watchAllFields", watchAllFields);
  console.log("watchField", watchField);

  return <input type="text" {...register(name, { required: true, maxLength: 50 })} />;   
}

const Container = () => {
  const { register, watch, control } = useForm();

  console.log("container re-render");

  return (
    <>
      <form>
        <label>Name</label>
        <RHFInput control={control} name="name" register={register} watch={watch} />
        <RHFInput control={control} name="address" register={register} watch={watch} />
      </form>
    </>
  );
};

function App() {
  console.log("app re-render");
  return <Container />;
}

Ở ví dụ này, khi sử dụng useWatch() trong RHFInput. Mỗi lần thay đổi input, component có useWatch() sẽ re-render và không re-render component cha như khi dùng watch().

Sử dụng useWatch() khi chúng ta muốn tối ưu hiệu suất, giảm số lần re-render các component.

Khác nhau giữa watch() và useWatch() trong React Hook Form

Sau khi tìm hiểu và watch() và useWatch() ở trên, mình nghĩ các bạn đã tìm được cho mình câu trả lời rồi 😉.

Mình chỉ ra sự khác biệt giữa 2 method này đó là trigger re-render của 2 method này khác nhau. Sử dụng watch() sẽ trigger re-render tại root level - nơi đặt useForm() điều này sẽ khiến cho tất cả các component phía trong bị re-render, còn nếu dùng useWatch() sẽ chỉ re-render tại nơi dùng method này mà không re-render lại component chứa nó.

Kết luận

Hi vọng bài viết này sẽ giúp các bạn hiểu được sự khác nhau giữa watch() và useWatch() trong React Hook Form. Đây là 2 method được sử dụng khá nhiều khi chúng ta sử dụng React Hook Form.

Bài viết đến đây là hết. Hẹn gặp các bạn trong các bài viết sắp tới nhé 👏😜🤞.