Controlled form inputs: where state lives determines re-render cost at 10, 100, and 500 fields

A DEV Community experiment examined whether controlled inputs alone determine how much React work an edit triggers in a form. It compared three approaches across forms with 10, 100, and 500 fields: parent-owned state, field-local state, and DOM-owned values read at submission. When one field was edited, parent-owned state re-ran the parent and every input component, scaling with field count. Field-local state re-ran only the edited input, and DOM-owned values triggered no component calls. The author notes the measurements exclude timing, FPS, and memory, and cover only simple independent text inputs without form libraries or validation.