Maximum Update Depth Exceeded When Using Default Enum with Additional Fields and Initial State in `AutoForm`

[KentonParton]

Description: I'm encountering a "Maximum update depth exceeded" error when using the AutoForm component in a Next.js project. This issue arises specifically when:

• A default value is set for an enum field in the Zod schema.
• There is at least one additional field in the form schema (e.g., a description string).
• An initial state is provided to the AutoForm component.

Steps to Reproduce:

1. Define a form schema using Zod with at least two fields: one being an enum with a default value, and another field (e.g., a string).
2. Provide initial state values for the form, matching the schema.
3. Render the AutoForm component using the defined schema and initial state.

Example Code:

"use client";

import { useState } from "react";
import AutoForm, { AutoFormSubmit } from "@/components/auto-form";
import * as z from "zod";

// Define the form schema using zod
const formSchema = z.object({
  description: z.string(),
  color: z.enum(["red", "green", "blue"]).default("red"), // note the default value
});

function MyForm({ values, setValues }) {
  return (
    <AutoForm
      values={values}
      formSchema={formSchema}
      onValuesChange={setValues}
      fieldConfig={{
        color: {
          fieldType: "select",
          inputProps: {
            placeholder: "Select color",
          },
        },
      }}
    >
      <AutoFormSubmit>Send now</AutoFormSubmit>
    </AutoForm>
  );
}

export default function AutoFormPage() {
  const [values, setValues] = useState({
    description: "Something here Something here",
    color: "red",
  });

  return <MyForm values={values} setValues={setValues} />;
}

Expected Behavior: The form should render and manage state without causing a "Maximum update depth exceeded" error.

Actual Behavior: When the AutoForm component is used with the above setup, it triggers an infinite loop, causing the "Maximum update depth exceeded" error.

Notes:

• The issue only occurs when a default enum is provided along with at least one other field and an initial state.
• If the default enum option is removed, the form works correctly.
• If only the enum field is present in the schema, the form works correctly.

Environment:

• Next.js version: 14.2.5
• React version: ^18
• Zod version: ^3.23.8

Potential Cause: The issue seems to be caused by the following useEffect hook in the AutoForm component:

React.useEffect(() => {
  onValuesChangeProp?.(values);
  const parsedValues = formSchema.safeParse(values);
  console.log("values: ", values);
  console.log("parsedValues: ", parsedValues);
  if (parsedValues.success) {
    onParsedValuesChange?.(parsedValues.data);
  }
}, [valuesString]);

By adding console logs, you can observe that the values continuously change, alternating between partial and full state updates. The logs show that the form's state repeatedly toggles between:

values:  {color: 'red'}
parsedValues:  {success: false}

values:  {description: 'Something here Something here', color: 'red'}
parsedValues:  {success: true, data: {…}}

Haven't been able to resolve the issue. Would be great if someone could take a look.

[a0m0rajab]

We had the same the same issue previosly, and it usually happens when you use values and setValues, a fast solution was to use temp variable to set the initial values and use a different state:

export default function AutoFormPage() {
  const [values, setValues] = useState();
  const defualtValues = {
    description: "Something here Something here",
    color: "red",
  };

  return <MyForm values={defualtValues} setValues={setValues} />;
}

[olliethedev]

I have the same issue and getting the "Maximum Update Depth Exceeded" with the same conditions listed above.