Warning: Maximum update depth exceeded.

[martins4duarte]

Hello @sersavan !

first of all, thanks for share your component!

im trying to use it without defaultValues, but have useEffect to update state on first render and it is causing a error when defaultValues doesnt exist, causing error:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

If i try to pass a empty string, i have empty component on UI as image below.

const form = useForm<Example>({
  resolver: zodResolver(exampleSchema),
  defaultValues: {},
});

<Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-2">
    <FormField
      control={form.control}
      name="example"
      render={({ field }) => (
        <FormItem className="mb-5">
          <FormControl>
            <MultiSelect
              options={[
                { value: 'example', label: 'Example' },
              ]}
              onValueChange={field.onChange}
              defaultValue={field.value}
              placeholder="Example"
              variant="inverted"
              animation={2}
              maxCount={3}
            />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
  </form>
</Form>

Dependencies

"react": "^18.3.1",
"react-hook-form": "^7.53.0",
"react-dom": "^18.3.1",
"next": "^14.2.7",
"@hookform/resolvers": "^3.9.0",
"@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-checkbox": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-radio-group": "^1.2.0",
"@radix-ui/react-scroll-area": "^1.1.0",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2",

[sersavan]

Hi, check that you use last version of MultiSelect component with that code inside of it:

/** rest of the component's code */

    const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultValue);
    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
    const [isAnimating, setIsAnimating] = React.useState(false);

    React.useEffect(() => {
      setSelectedValues(defaultValue);
    }, [defaultValue]);

/** rest of the component's code */

[martins4duarte]

Yes, as in documentation

[sersavan]

try to pass an empty array here:

const form = useForm<Example>({
  resolver: zodResolver(exampleSchema),
  defaultValues: {
     example: []
  },
});

[martins4duarte]

same

[rmidhunk]

I'm also having the same issue.

React.useEffect(() => { console.log("useEffect triggered with defaultValue:", defaultValue); setSelectedValues(defaultValue); }, [defaultValue]);

Is this part necessary?
when the defaultValue is not passed from the parent, then it is into a infinite loop.

[martins4duarte]

@rmidhunk as a temporary solution, i just removed this useEffect part and transform defaultValue parameter into a optional, is working well.

[sersavan]

Fixed