September Pop In: React Tidbits

September Pop In: React Tidbits

Hi All,

Just wanting to say hi while we’re in September. It’s been pretty busy at work and with Ellie being schooled again. ‘Twas the longest spring break ever. . . I’ve been doing a lot of work in React recently , which sometimes feels like, “yes, I’ve got this!” Then I have to deal with modifying state and then it’s all, “NOPE. What the world in the heck is going on??”

Here are a few of my observations with React after muddling around in it a while.

  • Why does wrapping my component in <> and </> magically make it work??
    • Turns out it’s called a React Fragment and it’s for letting you return multiple children without jacking things up. Please see link for less janky explanation.
  • Why is testing it so convoluted?
    • This is probably on me. I’m getting better at some parts of testing React, but it’s still mysterious.
    • It seems like you want to test the workflow rather than if X == Y specifically. So like if you click a button you want to make sure that when you do click it, all the things you want called and done are actually called and done.
    • Mocking is your friend and don’t try to test too much in one component. So if your component is calling a permission checker, only test up to the point where the permission checker is called and that you do call it. Then test the specifics of the permission checker in a new test.
  • State variables are cool, but it’s kind of tricky to debug them.
    • Just go and read about State Hooks. I don’t have a super firm grasp on it yet, so this here is mostly reference for me.

React isn’t really one of the things that I thought I’d be learning, but here we are and while parts of it are fine (I’m better at writing components) other parts are still just tricky to deal with (adding in redux for one). BUT! I’m learning and getting better at it and my goal is to not have to ask questions about the same thing over and over, which I hope I’m accomplishing.

More next time!

-Rachel

Leave a comment