React Component Lifecycle, What is a Component?

The React Show

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

• Episode Page
• Twitter

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
      • Default state/props
    • 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
      • Hook cleanup
  • 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