Solo Week + React (pt. 2)

This post should just be titled 'Tech Debt'. There's so much that I know I'm missing by not just going through the docs and learning this tools deeper levels.

I also did some refactoring today, and that came with some good learning. Number one, maybe don't rely on refactoring to glue together inter-related components. I ended up having to shift state up a few levels in order to get two components to mesh, and that was a pain. Am I getting into the same kind of trouble by putting off Context? I'm going to do a code review with my teammates tomorrow and talk to them about it. How much work am I building myself by pushing off Context?

There are a few small items I had made not to include in my last post, but I ran out of steam before getting to them.

A Few Small Things

Just on this assignment I've used two React-related things that I learned on the TA:

Using data-attributes to pass event values

As an alternative to the above, passing called functions into click handlers, with those values as the called-functions' parameters.

If you break one thing in React,you break everything. Maybe this should be obvious, but it wasn't immediately clear to me. I spent time looking for bugs in the wrong place - probably because I made multiple changes at once (before running the code). I can't remember what the case was, but it might have been something like breaking a non-visible element higher up in the DOM that caused some lower, visible elements to not render. I need to level up my node/React debugging.

Then a small thing I had noticed but hadn't questioned:

Parentheses around returned statements. This one is simple. If you're returning on multiple lines, wrap those lines with parens.

Figuring some things out

I mentioned refactoring and the process lead me to an answer to a question that I raised in my last post.
Previously, I was loading up state with a lot of redundant data. So here are two things I appreciate/learned today:

Changes to props leads to re-rendering, not just state change. So when fetching data, a slow, asynchronous action, the child component will render before it receives its data. But not to worry. If you pass that data from parent to child via props, the child will render that fresh data.

There are functions that will help you to update components - I need to learn these. But I also needed to take conditional rendering seriously, and employing that effectively solved my problems. If you call an index on a yet-unloaded thing like: someArray[0], if you wrap it in a conditional, no problem. If not, you're gonna break your code. I still need to figure out some things in this space (especially those functions), but I can appreciate the progress I made here today.

Misc

I've got some big-time catch-up to do on Toy Problems. I think they're due by the end of the week.

I've taken off from working out. It's almost time to re-start.

*Git is a major pain. I wish we did more training around this. Right now we're the blind leading the blind.

The long days of the program really build your endurance. I think entering the workforce will come with many challenges, but work stamina won't be one.