Intermediate React v3

As an immediate successsor to Brian Holt's 'Complete Intro to React v6', Brian presents 'Intermediate React v3'. All the intemediate course notes are at the same location as the intro course. And Brian is wearing the same shirt. So likely he presented it all on the same day.

I really like Brian's approach to these intermediate concepts. Instead of each section building on the previous section, all the sections stand independently. If you're not interested in the Tailwind section, or the Redux section, skip them. They both start off fresh, and there's no dependency from one to the next. That's a refreshing way to approach this, as React ecosystems are so diverse, there may be areas you just don't care about, or already know, and in this format, you can be selective about what you choose to learn.

He starts off going through all the different default hooks made available in react, as well as telling how often you may encounter them. This codesandbox was set up to demonatrate all the different hooks: https://codesandbox.io/s/github/btholt/react-hooks-examples-v3/tree/master/

  1. useState
  2. useEffect is used when
    • fetch from api
    • subscribe to a websocket
    • timeouts
  3. useContext
    • good for global application state
    • themeing is one way
  4. useRef
    • if you have a piece of state you want to survive past various rendering cycles
    • handy if holding onto a div between render cycles
    • we needed it for modals in the complete intro for react v6
  5. useReducer
    • thing layer on useState
    • either use useState or useReducer
    • there is a 'current' state and an 'action' object
    • reducer is a function that takes in a state and an action and returns back the state at the end
  6. useMemo
    • if this number hasn't changed, don't recompute it. it's really expensive and i don't want you to do that.
    • you give useMemo a function, and only run the function if the second argument changed.
  7. useCallback
    • doesn't it seem a little like useMemo?
    • I got a bit lost in the talk here
    • useCallback takes in a function and a depedency, and give it back the same function every single timeouts
  8. useLayoutEffect
    • if you like animations, may need to pay attention to.
    • this is how componentDidUpdate used to work
    • while 'effect' is scheduled, 'layouteffect' happens immediately after your render finishes
    • guarantee of immediacy of execution, like measuring the DOM
  9. useImperitiveHandle
    • likely not going to use
  10. useDebugValue
    • likely not going to use
    • like a consolel log for a custom hook

After going through hooks, he starts the Tailwind section. We use this at my current work, so I watched passively. One thing I noticed - he really breezes through this and doesn't go into 'intermediate' implementations of Tailwind (or TypeScript, or Redux, etc). Just a basic 'here is what this is, here is how to set it up, and here's some class names' - boom.

Following the section on Tailwind, Brian talks about code splitting and server-side rendering.

Then TypeScript - this is where I feel weak and need to have some drills. Brian breezes through updating the Pets project into TypeScript but without much explanation or feeling like I learned much. It feels introductory (or maybe more like a recap) without ever getting to actual instruction.

The Redux section felt more approachable. But I know little about Redux, so as far as I would know, he may be glossing over things here, too. Still, I at least felt like I learned a bit more about Redux after having watched it. And now, thanks to how he formatted the course, I could just atch that section over again (it's less than an hour) to have it sink in better.

What I really appreciated was his Jest testing approach. This was a great introduction as well.

In summary, I apprecate the structure and the breadth of what was covered. I do think some could be covered a little more in-depth than the brief overviews given here. I appreciated Brian's repeated best practices stated repeatedly across the course (test how a user would use the app, don't use any for TypeScript, etc).

If I could describe my ideal course, it would involve some also teaching how to work with a team of developers and usage of a ci/cd tool that would show setting up an app with three or four components, writing tests for them, then showing how to set up a build pipeline to netlify or some other free tool that would run your tests for you and alert when failed or succeeded. I feel like I would like a better understanding of when those types of test should run and how to configure that for a team working on a project together. I didn't get that out of this particular course, and that's ok, but I'll go looking for it (or maybe create my own).

June 17, 2021🏷frontendmastersreact