React-Hook-Forms

April 17th, 2020
react

Playing the Waiting Game

It's been a good week, but now it's time to unwind and enjoy the weekend. This wraps up my second full week of working remotely, and so far, I'm loving it. Every once in a while, an issue arises, like the smoke detector going off in the middle of a meeting when my fiancé was cooking dinner, or the little girl breaking into my room to run and get hugs, but for the most part, it's really nice to be able to work from home. I don't have to wear uncomfortable clothes and I don't get distracted nearly as much. While coding, it's important to get into a flow, where you're totally focused on the job at hand and totally engulfed in the code. While in the office, I will often get distracted by others in the office, like my neighbor who likes to chew peanuts as loud as he can, or others in the office that have to talk to the representatives in the field on the phone. When I'm at home, I can turn on a podcast or some music and go for hours without having any kind of distraction and really focus on the task at hand. Sometimes at work, I feel hesitant to look up documentation and take the time to read what I need to know, as I don't want to appear as though I don't know everything I need to know. I realize this is silly to think, but the thought still crosses my mind. At home, that is obviously not an issue, and I can take the time to dive deep on whatever I need to know.

react

We've been working on the same application since the first week I've been at work, with the first 3 weeks being spent on adding a different way for applicants to sign up for a plan, where they wouldn't need a quote ID. We implemented and shipped that about 3 weeks ago, and it's been going really well, delivering plenty of results. We then moved over to creating a virtual appointment setter, where users would follow a Facebook advertisement and be taken through a form process to sign up for a virtual appointment, handled over GoToMeeting. I stopped working on this about 2 weeks ago and my cohort finished it up. It got shipped earlier on in the week, but the advertisement isn't ready yet. It's close, but it won't be in use until sometime next week. Meanwhile, after I handed that project off, I switched gears back over to the payments application to work on a new feature. This allows users to pay via bank account instead of a credit card, which is good for our company because we save on fees and good for our customers because they have more options. The feature was pretty complex to implement on the front end and required quite a bit of advanced CSS, and it ended up turning out pretty good. After my cohort finished up the virtual appointment setter, he came back over to help me with the payments application. We were instructed to add a couple other features to supplement the new payment system, including a step where the representative would search for their lead and choose them from a list populated by an API, and another authentication step for the representative.

react

Everything we've been asked to do is now done, but we can't ship it until the backend is complete. Given there is a brand new way of collecting payments, this turns out to be quite a bit of work for the backend. If this was the only thing they had to do, I'm sure it would be done already, but I think he's getting pulled in multiple directions, so it's lagging behind. We had a soft deadline of this afternoon to get it ready for testing which came and went, and we're still just waiting. While we wait, though, we've done considerable work on optimizing the forms. Before this version, all forms were handmade, without any third-party packages like Formik or Redux-Forms being implemented. While I worked on these features, my cohort implemented React-Hook-Forms on 2 of the steps and dropped our re-renders from about 50 down to about 2, which is insane. I didn't know much about React-Hook-Forms before today, but I decided to give it a try. while there's still some work to do, I was able to convert 2 of the pages over to this package and was able to do the same thing with the re-renders. This is fantastic for the performance of our application, and is really going to be helpful as we continue to expand this thing, which is definitely the plan. I can say, for anyone interested in trying this package, it is definitely the way to go. There is a bit of boilerplate that comes along with it, and maybe adds 30 or so lines of code to each step, but the implementation is simple and semantic. Plus, it blows Formik and Redux-Forms out of the water.

Until tomorrow!

Created by Sam Thoyre, © 2019