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.LinksEpisode PageTwitterShow NotesIntroOverviewBackgroundStory about defining a component inside of a component (starts with tests/cypress)React has to check if the definition of a component has changedWhat actually is a component? Nothing more than a function with bookkeepingLifecycleMountingDefault state/propsUpdatingRuns function code but doesn’t use default state/propsUpdates the DOM when completeother than useLayoutEffectsPost-Updating / EffectsuseLayoutEffect, synchronous, after DOM update but before paintRuns hook code sometime after component code completes running and DOM is updated, asynchronousUnmountingHook cleanuplexical scopeSolutionsCreating lifecycle methods with useEffect properlyuseLayoutEffect vs useEffectDependency arrayuseOnce (similar to onMount)Similar to onMount but different because uses useEffect vs useLayoutEffectuseRef - ref.current will be undefined on first runset ref.current to true after running hook codeonUnmountAFAIK there is no way to on unmount in a function componentBut you shouldn’t need to, if you use cleanup effects properlyUpdating StatePrefer updating in event handlers vs useEffectEvent handler is more synchronous/easier to reason aboutDivisions between components/how to divide up your components/hooksShould this influence how we divide up our components?Generally no, abstractions should, not mechanics or performanceTangent: best practicesSummarySupport the show

Ver todos los episodios