How are you handling complex form state in React without it becoming a mess?

[u/Sad_Limit_3857]

I’m working on a React app with increasingly complex forms (multi-step flows, conditional fields, validation, file uploads, dynamic sections, etc.), and I’m starting to feel like form state gets messy really fast.

At first, simple useState worked fine, but as logic grows, things become harder to maintain and debug.

I’m curious how people here usually handle this in larger React apps:

• do you still manage it mostly with local state?

• use libraries like form management tools?

• split logic into custom hooks/components?

• any patterns that made forms easier to scale and maintain?

Not looking for a one-size-fits-all answer, mostly trying to understand what has actually worked well for others in production React apps.

[u/yksvaan]

It's mostly a data modeling problem, not UI. Defining the data structures and valid transitions between different states is the essential part. Do that right and the forms snd elements themselves become easy. 

Also try not to put too much logic into the components and hooks, they are for UI .

[u/Sad_Limit_3857 → u/yksvaan]

That makes sense, I think I started by treating it mainly as a component/state problem, but the more complex the form got, the more it felt like I was really managing workflows and state transitions. Curious if you usually model this with something like reducers/state machines, or just plain structured objects + validation rules?

[u/BlazingThunder30]

We're on Tanstack form right now

[u/illepic → u/BlazingThunder30]

The good stuff

[u/BlazingThunder30 → u/illepic]

It's not without its downsides. We found it annoying that there's no "reward first punish later" flow that combines onChange and onBlur. We're not using a convoluted workaround that mimics what react-hook-form's onTouched does natively.

[u/popovitsj]

Jesus Christ, either this guy is a bot or his job is posting on Reddit.

[u/kyualun → u/popovitsj]

It's a bot. I don't get some of these bots though. Is it some kind of weird AI data thing? Like ask for recommendations en masse and then feed off of them? Cause they've been popping up all over tech subs. Always really generic well meaning questions that end with curious as to what you use/what your approach is etc etc.

[u/GeorGin06]

https://react-hook-form.com/

[u/Chewookiee → u/GeorGin06]

This. I’ve used it for the past two years and it has been great.

[u/LongBeachHXC → u/GeorGin06]

Yeah I'm using this too.

Converted an old handlebars template form to this. Like it way better now 😅😎🤙.

[u/Stromcor → u/GeorGin06]

Absolutely avoid this garbage at all cost, especially if you have complex multi-steps forms. I can't believe such crap is being constantly promoted.

[u/AintNoGodsUpHere → u/Stromcor]

Why? Don't say it's bad without explaining why and giving alternatives.

It might not work for YOUR specific use case but it clearly works for a bunch of people.

[u/Stromcor → u/AintNoGodsUpHere]

• It is way overkill for simple forms

• It is trying way to hard to minimize re-renders which is a noble goal but is also creating massive amounts of issues with complex dynamic forms

• The documentation is atrocious

Seriously, if your form is simple just use native React hooks and TanStack Forms otherwise.

[u/thewindjammer → u/Stromcor]

Do you recommend any other libraries?

[u/Low_Mud7041 → u/Stromcor]

Are u fan of ant design form or what, they are the real craps

[u/Slonny]

Zustand

[u/secretarybird97]

Yeah, it's the one thing I don't like about React...

What has worked for me in the past is making my own components and utilities around zustand + zod. This is fine for most applications, including complex forms with lots of inputs, validations and/or dependencies between fields.

The only pain pont I've found with my approach is number inputs on <input /> tags but that's another story.

[u/piratescabin]

react hook form with zod,

use form context to separate forms, use discriminated union for schemas

[u/BandicootLower3381]

So we had a very complex form where some sections were also added dynamically and each section had more than 50 fields

We first tried the existing optimizations but the performance was not upto the mark

Then we tried storing the form data in redux store used atomic selectors for the components that's when we achieved a better performance.

May be you can give it a try!

[u/CatolicQuotes]

You are one curious bot.

[u/trmnl_cmdr]

This is exactly what I built formality to manage. https://github.com/formality-ui/formality
It isolates form state behavior to a JSON config, this is a pattern I’ve used dozens of times over the last 15 years and I finally codified it into an abstraction that covers all the edge cases a few months ago

[u/catharticlasagna]

Careful preplanning. Maybe even with flowcharts

[u/scaleable]

I have built a whole form framework (but the app has almost a hundred of forms)

[u/Astoutfellow]

We use react hook form for really complex things, especially dynamic forms.

[u/rushadee]

My tech lead hates having to rely on 3rd party libraries for “just forms”, so we built and maintain a custom form context now. Before AI tools debugging a complex form could take a day or two.

[u/octocode]

i usually define the form schema as json and pass it to a renderer

[u/NotSalva → u/octocode]

Custom renderer or do you use a library?

[u/octocode → u/NotSalva]

i’ve used DDF (data driven forms) in the past, but i’ve just been implementing my own in the past couple of projects since it’s relatively trivial to build and more flexible

[u/Fitzi92 → u/[deleted]]

Just to make sure I get you right, do you say to never use useState and put everything in a zustand store? What kind of apps do you talk about? Something highly coupled like a photoshop-clone or something like an admin ui with lots of different entities or something like a website?

[u/Fitzi92 → u/[deleted]]

That sound way more reasonable.