watch리랜더링 해결

watch 함수는 useEffect 함수 안에 subscription, unsubscribe 방식으로 작성해야 합니다.


import { useEffect } from 'react'

const {
  register,
  control,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm <
FormValues >
{
  defaultValues: {
    username: 'IU',
    age: 0,
    dob: new Date(),
  },
}

useEffect(() => {
  const subscription = watch(value => {
    console.log(value)
  })

  return () => subscription.unsubscribe()
}, [watch])

// const watchForm = watch();
// const watchForm2 = watch("age");

출처:

‣