[react-hook-form] form.watch vs useWatch (성능을 위해서는 useWatch 고려)

환경

• "react-hook-form": "^7.34.0"

개요

• form.watch 사용시, 모든 form 컴포넌트를 리렌더링하기 때문에, 성능에 영향을 미치는 경우가 있었음.
• useWatch는 re-rendering의 범위를 단위 컴포넌트 내로 제한하며, 필드명으로 범위를 또 제한할 수가 있었음.

샘플 코드

// fromDate, toDate 두 개의 props를 받는 datepicker에서의 작업예시
const watchVals = useWatch({ control: form.control, name: [fieldName, fieldName2 || 'dummy'] });

• 위 샘플에서는 control, name만 사용했지만, defaultValue, disabled, exact 등의 속성이 더 있음.

참고

• Hook Form으로 상태 관리하기 (react-hook-form 관련, 많은 도움이 된 블로그)