I’m having an issue where I’m trying to use a NextUI Select component within my react-hook-form. I’m utilizing the form given by shadcn and everything seems to be integrated well with all my other inputs except for the NextUI Select input. After placing a NextUI Select input within the form, I get the warning saying:
133app-index.tsx:25 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.
It looks like I get 10 rerenders every second. After examining the elements tab within chrome dev tools, I notice that the id for the NextUI Select input keeps changing from the id I passed when I added it to the form and a dynamic id that seems to be coming from react-hook-form. I tried removing the id attribute from the Select component but then NextUI seems to have added it’s own dynamic id which changes to the react-hook-form dynamic id and then it changes back to the NextUI dynamic id and this continues forever. Is there a way to stop NextUI or react-hook-form from manipulating the id? Here’s my form component:
'use client';
import { generalInfoSchema } from '@/lib/zod/user.schemas';
import { zodResolver } from '@hookform/resolvers/zod';
import React, { Dispatch, SetStateAction } from 'react';
import { useForm, useFieldArray } from 'react-hook-form';
import { GenderType, MeasurementType, User } from '@/types';
import { AccountSetupData } from '../account-setup-form';
import { RadioGroup } from '@nextui-org/radio';
import { getLocalTimeZone, parseDate, today } from '@internationalized/date';
import {
Form,
FormControl,
FormField,
FormItem
} from '@/components/shadcn/form';
import { z } from 'zod';
import { GenderRadio } from '@/components/Inputs/radio';
import { Input } from '@nextui-org/input';
import { Button } from '@nextui-org/button';
import { DatePicker } from '@nextui-org/date-picker';
import { Select, SelectItem } from '@nextui-org/select';
function GeneralInfoForm({
user,
accountSetupData,
setAccountSetupData,
setStep
}: {
user: User;
accountSetupData: AccountSetupData;
setAccountSetupData: Dispatch<SetStateAction<AccountSetupData>>;
setStep: Dispatch<SetStateAction<number>>;
}) {
const infoSchema = generalInfoSchema(user);
const form = useForm<z.infer<typeof infoSchema>>({
resolver: zodResolver(infoSchema),
defaultValues: {
gender: GenderType.Male,
birthday: parseDate('1990-01-01'),
height: '',
weight: ''
}
});
const {fields} = useFieldArray({})
function onSubmit(value: z.infer<typeof infoSchema>) {
const birthday = new Date(
`${value.birthday.month}-${value.birthday.day}-${value.birthday.year}`
).toLocaleDateString();
const formatedData = { ...value, birthday: birthday };
setAccountSetupData({ ...accountSetupData, ...formatedData });
console.log(formatedData);
setStep(prev => prev + 1);
}
const heightOptions: string[] = [];
const genHeightOptions = () => {
[3, 4, 5, 6, 7, 8, 9].forEach(feet =>
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].forEach(inch =>
heightOptions.push(`${feet}ft ${inch}in`)
)
);
};
genHeightOptions();
return (
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className='space-y-8'
>
<h1 className='text-xl font-bold text-center mb-20'>
General information
</h1>
<FormField
control={form.control}
name='gender'
render={({ field }) => (
<FormItem>
<FormControl>
<RadioGroup
id='gender'
className='flex justify-evenly w-full'
{...field}
label='Gender'
orientation='horizontal'
isInvalid={form.formState.errors.gender && true}
errorMessage={
form.formState.errors.gender &&
form.formState.errors.gender.message
}
>
<GenderRadio className='flex-grow mr-1' value='male'>
Male
</GenderRadio>
<GenderRadio className='flex-grow ml-1' value='female'>
Female
</GenderRadio>
</RadioGroup>
</FormControl>
</FormItem>
)}
/>
<FormField
control={form.control}
name='birthday'
render={({ field }) => (
<FormItem>
<FormControl>
<DatePicker
{...field}
label='Birthday'
id='birthday'
showMonthAndYearPickers
minValue={parseDate('1900-01-01')}
maxValue={today(getLocalTimeZone())}
isInvalid={form.formState.errors.birthday && true}
errorMessage={
form.formState.errors.birthday &&
form.formState.errors.birthday.message
}
/>
</FormControl>
</FormItem>
)}
/>
{user.measurementUnit === MeasurementType.Cm ? (
<FormField
control={form.control}
name='height'
render={({ field }) => (
<FormItem>
<FormControl>
<Input
id='height'
type='number'
{...field}
label='Height'
endContent={
<div className='pointer-events-none flex items-center'>
<span className='text-default-400 text-small'>
{user.measurementUnit ||
accountSetupData.measurementUnits}
</span>
</div>
}
isInvalid={form.formState.errors.height && true}
errorMessage={
form.formState.errors.height &&
form.formState.errors.height.message
}
/>
</FormControl>
</FormItem>
)}
/>
) : (
<FormField
control={form.control}
name='height'
render={({ field }) => {
const { value, ...rest } = field;
return (
<FormItem>
<FormControl>
<Select
id='height'
label='Height'
selectedKeys={[value]}
{...rest}
isInvalid={form.formState.errors.height && true}
errorMessage={
form.formState.errors.height &&
form.formState.errors.height.message
}
>
{heightOptions.map((height: string) => (
<SelectItem key={height}>{height}</SelectItem>
))}
</Select>
</FormControl>
</FormItem>
);
}}
/>
)}
<FormField
control={form.control}
name='weight'
render={({ field }) => (
<FormItem>
<FormControl>
<Input
id='weight'
type='number'
{...field}
label='Weight'
endContent={
<div className='pointer-events-none flex items-center'>
<span className='text-default-400 text-small'>
{user.weightUnit || accountSetupData.weightUnit}
</span>
</div>
}
isInvalid={form.formState.errors.weight && true}
errorMessage={
form.formState.errors.weight &&
form.formState.errors.weight?.message
}
/>
</FormControl>
</FormItem>
)}
/>
<Button
type='submit'
variant='shadow'
color='primary'
className='w-full'
>
Submit
</Button>
</form>
</Form>
);
}
export default GeneralInfoForm;
I’ve tried removing id property but NextUI and react-hook-form just add their own dynamic id’s that still conflict with each other. I tried removing all bindings from react-hook-form from the Select component but simply having the Select component inside the shadcn form field component updates the id. Taking the Select component completely outside the shadcn form component stops the rerenders but then I lose the ability to validate Select component when a user clicks on the submit button.
MoeHabibi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.