Devsisters Shares Experience of Elegantly Solving Complex Form State Management with fp-ts

Lee Chang-hee, a backend engineer on Devsisters' Platform Cell, shared his experience of elegantly handling complex form data state management using fp-ts. The existing imperative code using React's useState had the problem that as validation fields increased, the states and functions grew proportionally, deepening code duplication.

Extracting Common Logic and a Functional Approach

To solve this problem, only the input values and validation functions were injected from outside, while the rest of the state update and validation flow was separated into common functions. Using fp-ts's pipe and Either types, he implemented a structure that chains an array of validation functions, returning an error message on failure and the input value on success.

Without using a library like react-hook-form, this approach contributed to lowering the complexity of form validation logic and increasing reusability using only fp-ts, which was already in use in the project.