React form library for very long clinical forms (200+ fields), what holds up?

Question

A small team I advise is building an assessment form for nursing homes. It has more than 200 fields in about 15 sections, many conditional fields ("if a fall in the last 6 months, then ask..."), and it must save drafts, because nobody completes it in one sitting. They started with controlled inputs and one big state object, and typing became noticeably slow on the tablets the staff use.

I am not a frontend developer, so I would like to point them in a good direction:

Is react-hook-form the right choice at this size, or something else?
How do you keep the conditional logic readable? Today it is many nested ternaries in the JSX.
Any experience with autosave that does not save on every keystroke?

Ben Carter · Accepted Answer

Did a 140-field intake form for a physio clinic last year so I feel this. What worked for us: 1. react-hook-form, yes. It uses uncontrolled inputs, so typing in one field doesn't re-render the whole form. That alone fixed the lag. 2. One component per section, and useWatch only on the fields your conditions depend on, not a big watch() at the top. 3. Move the conditions out of JSX into plain config, like { field: 'fallDetails', showIf: (v) => v.fallLast6Months === 'yes' }. Way easier to test, and the clinic could actually review it. 4. Autosave: debounce 1-2s after the last change, plus save when they switch section. Keep a version number so two open tabs don't overwrite each other. 5. A zod schema per section for validation. Also, pun obligatory: sounds like this form needs a lot of care.

Mariana Costa · Answer

From UX side: with 200 fields please show progress per section and let people jump between sections freely. In our checkout research people abandon less when they can see how much is left. The nursing staff will thank you

React form library for very long clinical forms (200+ fields), what holds up?

Accepted answer

Hannah Weiss

Get the best of #rerender-anonymous weekly

Comments