Why We Chose react-hook-form and How We Applied It

Inflab's frontend team adopted react-hook-form to solve serious rendering problems occurring in the profile and application features of Rallit, an IT recruitment platform. Previously, they addressed this using colocation and ref, but this had limitations such as data synchronization issues caused by scattered state and a complex state management structure.

The main benefits gained through adopting react-hook-form are as follows.

• Solving rendering and synchronization issues: By leveraging the uncontrolled component approach, they optimized rendering performance while also managing data consistently without props drilling via useFormContext.
• Simplified code and improved maintainability: The state management logic, which had previously been fragmented across Recoil, Context API, local state, and ref, was consolidated using useFormState, handleSubmit, and more. This process achieved a dramatic effect, with approximately 6,977 lines of code modified in total.
• Increased development productivity: Support for class-validator enabled concise implementation of data validation logic, and reduced dependency on global state management tools lowered maintenance costs.