// ...

function MyForm() {
  const {
    formState: { errors },
    setError,
    register,
  } = useFormContext<FormValues>();

  useEffect(() => {
	  // setErrore
    setError("firstname", { type: "manual", message: "This is an error" });
  }, [setError]);

  return (
		// ...
        <input {...register("firstname")} placeholder="firstname" />
        {errors.firstname && <p>errors.firstname.message</p>}
		// ...
  );
}

export default function App() {
  const methods = useForm<FormValues>();

  return (
    <FormProvider {...methods}>
      <MyForm />
    </FormProvider>
  );
}
TypeScript
복사

JavaScript
복사

원인 파악

해결방안

느낀점

  React.useLayoutEffect(() => {
    const unsubscribe = control._subscribe({
      formState: control._proxyFormState,
      callback: () => {
        updateFormState({ ...control._formState });
      },
      reRenderRoot: true,
    });

    return () => {
      unsubscribe();
    };
  }, [control]);
JavaScript
복사

  React.useLayoutEffect(() => control._subscribe({
      formState: control._proxyFormState,
      callback: () => {
        updateFormState({ ...control._formState });
      },
      reRenderRoot: true,
    }),
    [control],
  );
JavaScript
복사