Today, I was cleaning up a vibe-coded project in NextJS, with a custom hook for validating and handling Form Submission, i.e., useForm.
- Form works? Yes, but only for small forms.
- Is it maintainable? Might be.
- Is it scalable? No.
For complex forms, it was giving an error related to rendering,
I failed to fix the issue
I tried for an hour to untangle the spaghetti, but failed.
Used AI tools, but was unable to fix it. Moreover, AI even hallucinated that it solved the issue.
The Last Resort
As a last resort, I have 2 choices:
- either to recreate the custom hook from scratch,
- or use well known library such as
FormikandYup.
I chose to go with libraries. Why?
- I don't want to reinvent the wheel, solving every known edge case/corner case, and testing the forms in major browsers.
- These libraries are well maintained from years.
- Clear and easy to read documentation.
- Easy to upgrade to future ReactJS versions
Verdict
Before diving into coding, make sure to research whether the feature you're building is already supported by any established libraries or frameworks.
Top comments (1)
This is a perfect example of a failure mode that doesn't get enough attention: AI reinventing solved problems badly.
The custom
useFormhook that works for simple cases but breaks on complex forms — that's AI optimizing for the happy path, which is exactly what AI is good at. Edge cases, browser quirks, accessibility requirements — those are baked into Formik/react-hook-form through years of production usage and bug reports. No prompt is going to replicate that.The takeaway isn't "don't use AI for forms." It's: use AI to integrate established libraries, not to replace them. AI is great at writing the glue code that connects Formik to your specific data model. It's terrible at reimplementing Formik from scratch. Knowing which task to give it is the skill that matters now.