subscribe

subscribe: UseFormSubscribe v7.55.0부터

formState 변경과 값 업데이트를 구독합니다. 폼 변경으로 인한 불필요한 리렌더링을 피하면서 개별 필드나 전체 폼을 구독할 수 있습니다.

Props(속성)

---

이름	타입	설명	예시
name	undefined	전체 폼을 구독합니다.	subscribe()
	string	name으로 단일 필드를 구독합니다.	subscribe({ name: 'firstName' })
	string[]	name으로 여러 필드를 구독합니다.	subscribe({ name: ['firstName', 'lastName'] })
formState	Partial<ReadFormState>	구독할 formState 항목을 선택합니다.	subscribe({ formState: { values: true, isDirty: true, dirtyFields: true, touchedFields: true, isValid: true, errors: true, validatingFields: true, isValidating: true } })
callback	Function	구독의 콜백 함수입니다.	subscribe({ formState: { values: true }, callback: ({ values }) => { console.log(values) } })
exact	boolean = false	이름을 정확히 일치시킬지 지정합니다. false(기본값)이면 구독한 이름이 변경된 필드 이름의 접두사이거나 그 반대일 때 구독이 실행됩니다. v7.81.0부터 true이면 구독한 필드 자체나 상위 경로 중 하나가 업데이트될 때 실행되지만, 중첩된 하위 경로가 변경될 때는 실행되지 않습니다(예: "users.0.name"은 "users"를 설정하면 업데이트되지만 "users"는 "users.0.name"이 변경되어도 업데이트되지 않음).	subscribe({ name: 'target', exact: true })

참고

• 이 함수는 createFormControl.subscribe와 같은 기능을 제공합니다. 가장 큰 차이는 createFormControl을 React 컴포넌트 밖에서 초기화할 수 있다는 점입니다.

• 이 함수는 렌더링 없이 폼 상태를 구독하는 용도입니다. 이 목적에는 watch 콜백 함수 대신 이 함수를 사용하세요.

예시:

---

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

type FormInputs = {
  firstName: string
  lastName: string
}

export default function App() {
  const { register, subscribe } = useForm<FormInputs>()

  useEffect(() => {
    // make sure to unsubscribe;
    const callback = subscribe({
      formState: {
        values: true,
      },
      callback: ({ values }) => {
        console.log(values)
      },
    })

    return () => callback()

    // You can also just return the subscribe
    // return subscribe();
  }, [subscribe])

  return (
    <form>
      <input {...register("firstName", { required: true })} />
      <input {...register("lastName", { required: true })} />
    </form>
  )
}