useWatch

페이지 선택…Watch

</> useWatch: (UseWatchProps) => object

watch API와 비슷하게 동작하지만 커스텀 훅 수준에서 리렌더링을 격리하므로 애플리케이션 성능을 개선할 수 있습니다.

Props(속성)

---

이름	타입	설명
name	string | string[] | undefined	필드 이름입니다. 반응형이므로 이 prop을 동적으로 변경하면 새 필드 이름을 구독합니다.
control	Object	control 객체이며 useForm이 제공합니다. FormProvider를 사용한다면 선택 사항입니다.
compute	function	v7.61.0부터 선택한 폼 값과 계산된 폼 값을 구독합니다. 전체 폼을 구독하되 특정 조건에서만 업데이트된 값을 반환합니다. const watchedValue = useWatch({ compute: (data: FormValue) => { if (data.test?.length) return data.test; return ''; }, }); 특정 폼 값 상태를 구독합니다. const watchedValue = useWatch({ name: 'test', compute: (data: string) => { return data.length ? data : ''; }, });
defaultValue	unknown	폼이 마운트되기 전이고 아직 현재 값이 없을 때 반환되는 대체 값입니다. 폼이 마운트되면 실제 현재 폼 값이 이 대체 값보다 우선합니다.
disabled	boolean = false	v7.13.0부터 구독을 비활성화하는 옵션입니다.
exact	boolean = false	v7.20.0부터 이름을 정확히 일치시킬지 지정합니다. false(기본값)이면 구독한 이름이 변경된 필드 이름의 접두사이거나 그 반대일 때 구독이 실행됩니다(예: "users"를 구독하면 "users.0.name" 업데이트를 받음). v7.81.0부터 true이면 구독한 "users.0.name" 필드 자체나 상위 경로 "users.0" 또는 "users"를 setValue로 설정할 때 업데이트를 받지만, 중첩된 하위 경로가 변경될 때는 실행되지 않습니다("users" 구독은 "users.0.name" 업데이트를 받지 않음).

반환값

---

예시	반환값
useWatch({ name: 'inputName' })	unknown
useWatch({ name: ['inputName1'] })	unknown[]
useWatch()	{[key:string]: unknown}

규칙

• 첫 렌더링에서 useWatch는 현재 폼 값이 있으면 그 값을 반환합니다. defaultValue prop(또는 defaultValues를 제공하는 useForm)은 폼이 마운트되기 전, 즉 값이 등록되기 전의 대체 값으로만 사용됩니다.

• useWatch와 watch의 유일한 차이는 루트(useForm) 수준 또는 커스텀 훅 수준에 있습니다.

• useWatch는 실행 순서가 중요합니다. 구독이 설정되기 전에 폼 값을 업데이트하면 업데이트된 값을 무시합니다.

  setValue("test", "data")
  useWatch({ name: "test" }) // ❌ subscription happened after value update, no update received
  useWatch({ name: "example" }) // ✅ input value update will be received and trigger re-render
  setValue("example", "data")

  다음과 같은 간단한 커스텀 훅으로 위 문제를 해결할 수 있습니다.

  const useFormValues = () => {
    const { getValues } = useFormContext()
  
    return {
      ...useWatch(), // subscribe to form value updates
  
      ...getValues(), // always merge with latest form values
    }
  }

• useWatch 결과는 useEffect 의존성이 아니라 렌더링 단계에 맞게 최적화되어 있습니다. 값 업데이트를 감지하려면 값 비교를 위한 외부 커스텀 훅을 사용할 수 있습니다.

예시:

---

Form

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

interface FormInputs {
  firstName: string
  lastName: string
}

function FirstNameWatched({ control }: { control: Control<FormInputs> }) {
  const firstName = useWatch({
    control,
    name: "firstName", // without supply name will watch the entire form, or ['firstName', 'lastName'] to watch both
    defaultValue: "default", // default value before the render
  })

  return <p>Watch: {firstName}</p> // only re-render at the custom hook level, when firstName changes
}

function App() {
  const { register, control, handleSubmit } = useForm<FormInputs>()

  const onSubmit = (data: FormInputs) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name:</label>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input type="submit" />

      <FirstNameWatched control={control} />
    </form>
  )
}

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

function Child({ control }) {
  const firstName = useWatch({
    control,
    name: "firstName",
  })

  return <p>Watch: {firstName}</p>
}

function App() {
  const { register, control } = useForm({
    defaultValues: {
      firstName: "test",
    },
  })

  return (
    <form>
      <input {...register("firstName")} />
      <Child control={control} />
    </form>
  )
}

고급 필드 배열

import { useWatch } from "react-hook-form"

function totalCal(results) {
  let totalValue = 0

  for (const key in results) {
    for (const value in results[key]) {
      if (typeof results[key][value] === "string") {
        const output = parseInt(results[key][value], 10)
        totalValue = totalValue + (Number.isNaN(output) ? 0 : output)
      } else {
        totalValue = totalValue + totalCal(results[key][value], totalValue)
      }
    }
  }

  return totalValue
}

export const Calc = ({ control, setValue }) => {
  const results = useWatch({ control, name: "test" })
  const output = totalCal(results)

  // isolated re-render to calc the result with Field Array
  console.log(results)

  setValue("total", output)

  return <p>{output}</p>
}