환경
- "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 등의 속성이 더 있음.