為什麼 `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", error);，有時可能會導致感知到的多個渲染，尤其是在開發模式下。

確保沒有嚴格模式：既然你提到你沒有使用 React Strict 模式，這應該不是問題，但最好驗證一下。

驗證 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中文網其他相關文章！