This group is great for people building shared component libraries:
The foundation of all reusable components in React. Once you understand this concept, your components will be able to work in UIs you aren't even thinking about yet.
Concepts:
- Encapsulation: wrap up a lot of behavior in smaller components
- Composition: Create encapsulation without taking control of rendering, providing maximum reuse across the project (or projects).
- Implicit Data: identify the difference between "application data" (explicit) and "library data" (implicit).
- Data Flow: how to communicate state and changes to state implicitly
APIs:
- context
- state
This is a concept that even really experienced React developers often struggle with. We'll see how the idea of form element's "controlled" vs "uncontrolled" modes apply to our own custom components as well. Anytime you've thought you needed to "sync state", you probably want this instead.
Concepts:
- State ownership
- Implicit State becomes Explicit sometimes
- One-way data flow vs. two-way binding
- "Lifting state"
- Single responsibility principle
Random topics that don't deserve an entire lecture/exercise. When you build shared components there are a handful of considerations and boilerplate things you should do, like forwardRef, wrapping events, forwarding props, etc. We'll discuss the "how" and the "why" of each one.
And here's everything else
Component based development makes testing a breeze. We'll fire up JEST and React Testing Library to who how to unit test some components as though we were the user interacting with them. We'll also discuss when to use a unit tests vs integration and end-to-end tests.
Something that made React popular was its ability to sneak into an app, rather than require that you rewrite the whole thing in React. If you've already invested years into shared UI abstractions, like jQuery plugins, or some other imperative DOM widgets, you can wrap them in React components without a ton of effort.
We'll also discuss how to migrate your product code over to React incrementally. Rewrites are for the birds!
Concepts:
- Wrapping imperative code
- Synchronization
APIs:
- useRef
- useImperativeHandle
React is usually Fast Enough™. But sometimes it's not. Instead of just "counting re-renders" we'll learn a little more about how React decides to make an update, which parts of that code path can get slow, how to identify the slow parts (instead of playing wack-a-mole or over-optimizing) and finally what your application code can do to make it fast.
Concepts:
- "Dropping State", keeping it too high causes more of the tree to diff than you need, dropping volatile state down can speed up your app
- Diffing, referential identity
- Perf is about tradeoffs, you usually make one thing slower to make another faster, or you make the code more complicated.
APIs:
- useMemo
- React.memo
- useCallback
Two hooks are less common but still important: useLayoutEffect and useImperativeHandle. We'll cover use-cases for both and common misuses of them.
APIs:
- useLayoutEffect
- useImperativeHandle
Hooks bring an all new level of composition to React. Where before we only had components to compose state and behavior--which led to various patterns like "render props" and "higher order components"--now we have components to compose elements and hooks to compose state and behavior. We'll explore both basic and advanced methods to compose your hooks together to get the most out of React with maximal reuse. We'll do things like create a version of useState with undo/redo, mimicking redux's middleware on state, and more practical things like saving to local storage and making promises a breeze.
Sometimes you want to add behavior to elements but you don't have or want knowledge of the element. While this new pattern has as handful of gotchas, it's a whole new composition strategy in React with a lot of potential. Side note: we're using it a bit, but we're still not sure where the dragons live!