`formState.errors`가 여러 번 실행되는 이유는 무엇입니까?

질문: [formState.errors](https://stackoverflow.com/a/78820591/23066581)가 여러 번 실행되는 이유는 무엇인가요?
답변:
React Hook Form 및 formState.errors를 사용할 때 여러 번 다시 렌더링될 가능성이 있습니다. 예를 들어 다음과 같은 일이 발생할 수 있습니다. 양식 상태 업데이트: 각 상호 작용 또는 유효성 검사를 확인한 후 React Hook Form이 양식 상태를 업데이트합니다. 이러한 업데이트는 구성 요소의 다시 렌더링을 트리거하기 위해 발생합니다. 특히, 유효성 검사 규칙을 확인할 때마다 또는 오류 설정이 발생할 경우 React Hook Form은 오류 객체를 업데이트한 다음 구성 요소의 다시 렌더링을 트리거합니다.

React의 렌더링 동작: 또한 재렌더링은 조정 알고리즘으로 인해 React 자체에 의해 트리거될 수도 있습니다. 트리에 특정 변화가 있다고 의심되면 React는 실제로 구성 요소를 다시 렌더링할 수 있습니다.

개발 모드 동작: React는 버그나 부작용을 잡기 위해 추가로 다시 렌더링합니다. 부작용을 감지하고 구성 요소가 순수하게 유지되도록 보장하기 위한 개발 과정의 이중 렌더링 동작 때문일 수 있습니다.

문제 해결 단계: onSubmit이 여러 번 호출되었는지 확인하세요. onSubmit이 한 번만 호출되는지 확인하세요. 제출물이 여러 개인 경우 여러 번 다시 렌더링됩니다.

렌더링 최적화:

구성 요소가 복잡하거나 렌더링 로직이 매우 비싼 경우 React.memo 또는 useMemo를 사용하여 불필요한 다시 렌더링을 피해야 합니다.

React.memo의 예:

    const App = React.memo(() => {
  // ...existing code
});

디바운스 유효성 검사: 양식 유효성 검사로 인해 여러 업데이트가 발생하는 경우 상태 변경 및 다시 렌더링 빈도를 줄이기 위해 유효성 검사 디바운싱을 고려하세요.

불필요한 콘솔 로그 방지: console.log("errors",errors);와 같은 빈번한 로깅은 특히 개발 모드에서 다중 렌더링 인식에 영향을 미칠 수 있습니다.

엄격 모드가 없는지 확인: React 엄격 모드를 사용하지 않는다고 말씀하셨기 때문에 문제가 되지는 않지만 확인해 보는 것이 좋습니다.

React Hook Form 버전 확인: 최신 버전에서는 버그나 예상치 못한 동작이 수정될 수 있으므로 최신 버전의 React Hook Form을 사용하고 있는지 확인하세요.

예제 구성 요소 다음은 약간의 최적화가 적용된 예입니다.

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

type FormInputs = {
  firstName: string;
};

const App = React.memo(() => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormInputs>({
    defaultValues: {
      firstName: "",
    },
  });

  function onSubmit(data: FormInputs) {
    console.log("onSubmit", data);
  }

  console.log("errors", errors);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name</label>
      <br />
      <input type="text" {...register("firstName", { required: "First name is required" })} />
      <br />
      <input type="submit" />
    </form>
  );
});

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

React Hook Form이 양식 상태를 업데이트하는 방식으로 인해 또는 심지어 React 자체의 조정 프로세스로 인해 여러 번 다시 렌더링이 발생합니다. 구성 요소의 최적화와 상태 처리는 실제로 추가 재렌더링을 줄이거나 완전히 방지할 수도 있습니다. 그래도 작동하지 않으면 React Hook Form의 저장소/문서에서 업데이트나 알려진 문제를 확인하세요.

위 내용은 `formState.errors`가 여러 번 실행되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!