Building a React Form Component

The recruitment service Rallit has a complex form structure with up to about 700 input boxes on a single page. The existing Controlled Component approach caused the entire form to re-render on every input, leading to degraded UX while typing.

To solve this, two main approaches were examined.

• State separation (Colocation): Each Form Control element is given its own individual state, so that only the necessary component is rendered independently. However, this has the drawback that it is difficult for the parent component to read the state of child components.
• Uncontrolled Component: This approach accesses DOM elements directly via JavaScript to read values. It is advantageous in terms of performance since it avoids state-based re-renders, and it makes it easy for the parent component to collect values whenever needed.