useFormikを使ったフォームのパフォーマンスを向上するにはどうすればよいのか？

memo-useformik.md

useFormikを使ったフォームのパフォーマンスを向上するにはどうすればよいのか？

useFormikを使って、大きなフォームを作っているとする。
そのとき、フォームに値を入力するたびにフォームが再レンダリングされてしまい、パフォーマンスが気になる場合がある。
どうすればパフォーマンスを向上することができるのか？

コンポーネントをメモ化することによって、パフォーマンスを向上する

CodeSandboxに公開する

useFormikを使って姓と名を入力するフォームを作成する

const App = () => {
  const formik = useFormik({
    onSubmit: onSubmit,
    initialValues: { firstname: "Tetsuya", lastname: "Taguchi" }
  });

  return (
    <div className="app">
      <form onSubmit={formik.handleSubmit}>
        <label>First Name</label>
        <input
          name="firstname"
          value={formik.values.firstname}
          onChange={formik.handleChange}
        />
        <label>Last Name</label>
        <input
          name="lastname"
          value={formik.values.lastname}
          onChange={formik.handleChange}
        />
      </form>
    </div>
  );
};

input要素をコンポーネント化する

const Input = ({ formik, name }) => (
  <input
    name={name}
    value={formik.values && formik.values[name]}
    onChange={formik.handleChange}
  />
);

const App = () => {
  const formik = useFormik({
    onSubmit: onSubmit,
    initialValues: { firstname: "Tetsuya", lastname: "Taguchi" }
  });
  return (
    <div className="app">
      <form onSubmit={formik.handleSubmit}>
        <label>First Name</label>
        <Input formik={formik} name="firstname" />
        <label>Last Name</label>
        <Input formik={formik} name="lastname" />
      </form>
    </div>
  );
};

コンポーネントをメモ化する

const Input = React.memo(
  ({ formik, name }) => (
    <input
      name={name}
      value={formik.values && formik.values[name]}
      onChange={formik.handleChange}
    />
  ),
  (prevProps, nextProps) =>
    prevProps.formik.values[prevProps.name] ===
    nextProps.formik.values[nextProps.name]
);

props は浅い比較では等価なので、第2引数で比較関数を指定する必要がある。

まとめ

今回は useFormik を用いたフォームでパフォーマンスを向上するための方法を示した。