Skip to content
♥

subscribe

리렌더링 없이 폼 상태 업데이트 구독

subscribe: UseFormSubscribe<TFieldValues extends FieldValues>

formState 변경사항과 값 업데이트를 구독합니다. 개별 필드나 전체 폼을 구독할 수 있으며, 폼 변경으로 인한 불필요한 리렌더링을 방지할 수 있습니다.

Props

NameTypeDescriptionExample
nameundefined전체 폼을 구독합니다.subscribe()
string[]name으로 여러 필드를 구독합니다.subscribe({ name: ['firstName', 'lastName'] })
formStatePartial<ReadFormState>구독할 formState를 선택합니다.
subscribe({ 
  formState: { 
    values: true, 
    isDirty: true, 
    dirtyFields: true, 
    touchedFields: true, 
    isValid: true, 
    errors: true, 
    defaultValues: true, 
    isSubmitted: true  
  } 
})
callbackFunction구독을 위한 콜백 함수입니다.
subscribe({ 
  formState: { 
    values: true 
  }, 
  callback: ({ values }) => { 
    console.log(values) 
  } 
})
exactboolean구독 시, 정확히 일치하는 매칭을 활성화합니다.subscribe({ name: 'target', exact: true })
참고사항

  • 이 함수는 변경사항 구독만을 위한 것이며, 상태 업데이트 dispatch나 리렌더링 트리거는 허용되지 않습니다. 예: setValue 또는 reset

  • 이 함수는 createFormControl.subscribe와 동일한 기능을 공유합니다. 다만 createFormControl은 React 컴포넌트 외부에서도 초기화할 수 있다는 점이 다릅니다.

  • 이 함수는 렌더링 없이 폼 상태를 구독하기 위한 전용 함수입니다. watch 콜백 함수 대신 이 함수를 사용하세요.

예시:

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


type FormInputs = {
  firstName: string
  lastName: string
}


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


  useEffect(() => {
    // 구독 해제를 반드시 해야 합니다;
    const callback = subscribe({
      formState: {
        values: true,
      },
      callback: ({ values }) => {
        console.log(values)
      },
    })


    return () => callback()


    // subscribe를 직접 반환할 수도 있습니다
    // return subscribe();
  }, [subscribe])


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

지원해 주셔서 감사합니다

프로젝트에서 React Hook Form이 유용하다고 생각하신다면, 스타를 눌러 지원해 주시길 부탁드립니다.