We’re always working with components, but do we know when they mount or unmount or even what that actually means? Do we know how effects play into the lifecycle of a component? On this episode, we’re going to take a close look the lifecycle of a React component; what it is made up of and how it interacts with the rest of your program.
Links
Show Notes
- Intro
- Overview
- Background
- Story about defining a component inside of a component (starts with tests/cypress)
- React has to check if the definition of a component has changed
- What actually is a component?
- Nothing more than a function with bookkeeping
- Lifecycle
- Mounting
- Updating
- Runs function code but doesn’t use default state/props
- Updates the DOM when complete
- other than useLayoutEffects
- Post-Updating / Effects
- useLayoutEffect, synchronous, after DOM update but before paint
- Runs hook code sometime after component code completes running and DOM is updated, asynchronous
- Unmounting
- lexical scope
- Solutions
- Creating lifecycle methods with useEffect properly
- useLayoutEffect vs useEffect
- Dependency array
- useOnce (similar to onMount)
- Similar to onMount but different because uses useEffect vs useLayoutEffect
- useRef - ref.current will be undefined on first run
- set ref.current to true after running hook code
- onUnmount
- AFAIK there is no way to on unmount in a function component
- But you shouldn’t need to, if you use cleanup effects properly
- Updating State
- Prefer updating in event handlers vs useEffect
- Event handler is more synchronous/easier to reason about
- Divisions between components/how to divide up your components/hooks
- Should this influence how we divide up our components?
- Generally no, abstractions should, not mechanics or performance
- Tangent: best practices
- Summary
Support the show
