Formik初始化时为何会渲染两次？附示例代码

核心原因 #

1. enableReinitialize 属性触发的额外渲染 #

你给Formik组件设置了enableReinitialize，这个属性的作用是当initialValues发生变化时，强制Formik重置内部状态。但这里你把initialValues绑定到了组件内部的useState变量data，组件首次渲染时，Formik先用data初始化内部状态，随后因为enableReinitialize的存在，Formik会检查initialValues是否和当前内部状态匹配——哪怕值完全一样，这个检查过程也会触发一次额外的渲染，导致组件整体渲染两次。

2. React严格模式的开发环境行为 #

如果你的项目开启了React严格模式（比如Create React App默认开启），在开发环境下React会刻意重复执行组件渲染、状态初始化等操作，用来帮你提前发现潜在的副作用问题。这种情况下，组件本身会被额外调用一次，叠加Formik的渲染，就会出现两次控制台输出。

解决办法 #

场景1：不需要动态修改初始值 #

直接移除enableReinitialize，同时把initialValues改成静态对象，不需要用useState存储——因为你当前并没有修改data的逻辑，用useState完全是多余的：

const SignupForm = () => {
  return (
    <Formik
      initialValues={{
        firstName: "",
        lastName: "",
        email: "",
      }}
      validateOnBlur={false}
      validateOnChange={false}
      onSubmit={(values, { setSubmitting }) => {
      }}
    >
      {(formik) => {
        console.log(formik);

        return (
          <form onSubmit={formik.handleSubmit}>
            <label htmlFor="firstName">First Name</label>
            <input
              id="firstName"
              type="text"
              {...formik.getFieldProps("firstName")}
            />
            {formik.touched.firstName && formik.errors.firstName ? (
              <div>{formik.errors.firstName}</div>
            ) : null}
            
          </form>
        );
      }}
    </Formik>
  );
};

场景2：需要动态更新初始值 #

如果确实需要后续修改initialValues，可以保留enableReinitialize——这种情况下开发环境的两次渲染是正常的，生产环境严格模式不会触发重复渲染，不会影响线上表现。如果想优化，可以确保initialValues只有在真正变化时才更新，避免不必要的触发。

内容的提问来源于stack exchange，提问作者Nick