What is the best code architecture for huge forms?

[AkselAllas]

I have a similar question to:
https://stackoverflow.com/questions/54850281/react-dividing-a-large-form-into-multiple-components

When I have ~40 inputs and I would get to ~1000 lines of code, then what is the best way to structure my code?

I'm thinking about two choices:

1. I make Controlled Child Components using Controller and having that Child Component pass up only valid values in the style of {input1: input1Value, input2: input2Value, input3: input3Value}. The downsides to this is the double rendering of those inputs and having to spread the new object passed up in an onSubmit.

2. I make everything flat in one file, which goes 1000+ lines.

[AkselAllas]

I'm gonna try using FormProvider

[HasanMothaffar]

I went with the second option and ended up with 1500+ lines.

Most of my controllers are between 20-25 lines as in the image below (I'm using MUI). I thought of creating abstractions but figured they would be a pain to maintain / hard to understand in the future.

@AkselAllas How was your experience with using FormProvider?

[AkselAllas]

How was your experience with using FormProvider?

I sadly don't remember. I'm no longer doing frontend 😂 🙃

[HasanMothaffar]

@Moshyfawn Thanks! It seems like an interesting project, I'll look into it. The only problem is that it's community-driven.. so I'm not sure if it stays up to date when either RHF or MUI release updates/breaking changes.

[HasanMothaffar]

@AkselAllas I think I'll follow along haha

[Moshyfawn]

I'm not sure if it stays up to date when either RHF or MUI release updates/breaking changes.

They've been pretty good at following along.

[HasanMothaffar]

I found an interesting abstraction using TypeScript on this reddit thread in case someone's interested.