React Component Lifecycle, What is a Component?

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