Managing State

June 4th, 2020
react

Taking it too Far

Quick update on my daughter: she's doing great. It seemed like she had a pretty rough cold for a couple days, possibly something as bad as Coronavirus. Her temperature was pretty high and she was completely out of energy. Yesterday, she woke up and was back to her usual self. She had a couple spurts in the middle of her cold where her temperature went down and she seemed better, so we thought it was possible it was just a brief reprieve from the fever. But, she felt good all day yesterday. Last night, she woke up a couple times through the night, but she never had a fever. She had been sleeping in the bed with us for a couple of nights, and I think she just got used to that. When she woke up and we weren't there, she threw a fit. But, after some quick snuggles and a bottle, she was able to get back to bed. I was hoping she would keep it going today, and she did. She hasn't had a fever now for nearly 48 hours and she has her usual energy. We got lucky, as this could have easily been the Coronavirus or something else that lasted longer than 48 hours. Usually, a cold like this wouldn't bother us so much, but with the threat of Covid-19, everything is heightened.

react

I got in to work today and started working on a refactor I had started yesterday. I have several screens that show fairly similar views with just different data coming in. I thought I could refactor these to use more reusable components, so I gave it a try. After a couple hours, I realized this may not be the best plan. I was going to have to have 4 different useForm functions in the parent component and 4 different onSubmit functions, and it just wasn't looking that good. My thoughts about creating something reusable is it should simplify the code. If anything, this was making it more complicated and more confusing. It probably would have dropped my file down about 400 or 500 lines of code, which, since it's now at 2600 lines, would have been a good thing. But, in the end, after quite a bit of work, I command-Z'ed out of the situation and reverted it back to how it was. I still want to try and refactor these components somehow, but I have to come up with a better way to do so. After I finished this up, my cohort peaked his head over the wall and started a conversation that led me down a full day's worth of work.

react

It started with talking about how to properly type a reducer with TypeScript. The system I have in place already for my reducer is top-notch, and it turns out this was the exact system my cohort was going to suggest. I found a guy named Carl Rippon who's written a ton of articles about using TypeScript with React, Redux, useReducers, useState, and React-Hook-Form, which is exactly what we're looking for. I suggested he take a look and I think he actually did a little later on. Then we got to talking about my monstrosity of a reducer. He suggested I take some of the UI state out of the reducer and manage it more locally. He demonstrated to me that, if I do this, I would limit rerenders of the rest of the page, only rerendering the components that were receiving updates. I was hesitant to backtrack the work I had put into this thing, but after thinking about it for a while, I realized he was 100% right. So, I set to work. I ended up setting up quite a few instances of local state in different components. Slowly, I started eliminating actions from my reducer. When I started the day, I had over 50 actions in my reducer, which is kind of crazy. I can happily say when I finished the day, I was down to 17 different actions in my reducer. There are some ways I could even bring it down from here, but I'll have to give it some thought tonight.

Until tomorrow!

Created by Sam Thoyre, © 2019