More React-Hook-Forms

We're pretty much at a stand still in our current project. We have a branch of the project that is almost entirely ready to push, except for the submit object that goes to the backend. There are some changes we need to make on that, but we can't until we get the information we need from the backend. So, until we get that, we're just working on the cleanup of the application, which is quite extensive. At this point, we have many, many files that were being used, but are no longer in use. The main reason for this is because of the integration of React-Hook-Forms. Since we started migrating all of our forms into using this, we've taken our files down considerably. It's not completely to my liking, as I typically like a cleaner format for my files, but we aren't in complete agreement over this. My cohort, who really has the final word on this, is more in favor of leaving multiple components in one file. So, for example, if there was a page that could be broken into multiple components, if they aren't being reused, he will just put those components below the main component in the same file. To me, this makes them much harder to read, and you end up having to do a lot of scrolling to find what you need. Also, if you don't know exactly where that file is, you have to look for it. Once I get used to it, it'll be fine, but for now, it's a bit disconcerting.

In most frameworks, which React is not, there is a specific pattern you follow for organizing files. You would know exactly where to put components and there would be no argument over something as silly as this between teammates. I kind of wish React was more strict about this, since it seems to me to be a waste of time to even discuss it. Even the React experts disagree about how to organize files and components, and there's really no right or wrong way to do it. The bottom line is, you should be consistent about how your team does things. Right now, we aren't consistent. Some folders are capitalized, some are not. Some pages are broken out into separate files with a component in each file, some are not. This doesn't work for me, so going forward, I'm going to adapt how I do things so they are the same as how my cohort does things. I think he tends to go to the extreme with this, as he did when I first got my hands on the application. Practically the entire application was in one file, and this was completely unreadable. There has to be a middle ground, but all I can do is lightly reign him in. I'm not going to change his mind on how he does things, nor do I think the way I do things is perfectly correct. I think I go to the other end of the spectrum, and that's not correct, either. So, I'm going to try and find a good middle ground where I won't be offending him and I can still live with the product.

As I stated, a lot of the last couple days of work have been about migrating to React-Hook-Forms. My cohort took the forms he had initially created before I started working on the application and moved them over to React-Hook-Forms, and Friday I started working on moving the ones I had written over. For the most part, it was no problem. There's a lot boilerplate that comes along with React-Hook-Forms, and it's screaming at me to refactor it into smaller components, but I'm resisting to appease the team. Some of my forms are now over 200 lines long, but I still need to go back and clean them up a bit. As I said, for the most part it was pretty easy to move them over to this new system, but any time a 3rd party package was being used, some issues did arise. There are 2 situations where outside packages are being used: with React-Select and with React-Input-Mask. I have about 3 different selects that have caused me issues, and a couple of masks on phone numbers that caused me about 4 hours of headache this morning. Finally, we put our heads together and found a solution to both issues. Apparently, whenever using 3rd party packages with React-Hook-Forms, it's ideal to use a Controller, which is kind of a wrapper for the outside component. With this implemented, things seemed to be working pretty good. I still have to implement this for the selects, but I'm pretty certain it's going to do the trick.

Until tomorrow!