- Our Company
- Quick history
- React Router
- Reach UI
- 20 Minute React™
- "Declarative", "Composable", "Functional"
- show off most APIs all at once, build up a little sort/filter searchable list
- Review "React Application Anatomy"
In this lesson we'll recreate some of the React APIs to help us understand on a more fundamental level what React is doing for us, which will both remove the feeling of "magic" that sometimes comes with using a framework, and helps us understand what "closures" are, what "rerendering" means, and how React decides when to update the DOM or re-run our effects.
Concepts:
- Being Declarative
- Composition
APIs:
- useRef
- useState
- useEffect
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
Sometimes you need to share state across the app, or you want to keep state around even after a component is unmounted so that when it mounts again you can restore the state. This lesson shows you how to do it, as well as how to bring "product language" into your code to make it much easier to understand later.
Concepts:
- Explicit vs. Implicit state
- Shared application state
- Persisting state between mount/unmount
- Writing code with "product language"
- Colocation
APIs:
- useState
- useReducer
- context
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
- One-way data flow vs. two-way binding
- "Lifting state"
- Single responsibility principle
Mutable state with refs is a commonly misunderstood API in React. Sometimes developers think they need it when they really need state, other times they use state when they really need a ref! In this lesson we clear up when to use a ref and when not to, and also how to make your components more compatible with other components with forwardRef.
Concepts:
- Mutable state
- composition with non-react, imperative code
APIs:
- useRef
- forwardRef
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:
- State ownership and data flow
APIs:
- useMemo
- React.memo
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.
Concepts:
- Composition
APIs:
- useState
- useEffect
- useRef