Best practices to store default form values and interfaces in React TypeScript-CodePudding

I've got a component with a huge and complicated form. So in one component I have more than 10 interfaces and a lot of default form values like that:

const {
        control,
        handleSubmit,
        resetField,
        formState: { errors }
    } = useForm<FormValues>({
        defaultValues: {
            site: {
                name: '',
                description: '',
                minTemperature: '',
                maxTemperature: '',
                windSpeed: '',
                seismicity: '',
                explosiveness: '',
// and lot of default values below (more than 30 rows)

I think that I should store interfaces and a constant with the Form default values in some other files, maybe, other directories. What are the best practices to store it?

Is it a good approach to store interfaces in a directory named "interfaces" in a file named "FormInterfaces.ts"? And where do you usually store default form values?

CodePudding user response：

I usually store interfaces and sometimes even types in their own file.

Constants should be defined in their own file and they get imported from there.

One free benefit that you get from this is that circular references are less likely to happen.

FormInterfaces.ts is most likely not a good name. The name should reflect the business logic that it builds and not how it's gonna get used.