Fundamentalsbeginner
Component Lifecycle Concepts (Mount, Update, Unmount)
Understand the three phases of a component's life and how they map from class lifecycle methods to hooks.
Every React component goes through three conceptual phases: mounting (first inserted into the DOM), updating (re-rendered due to new props or state), and unmounting (removed from the DOM). Class components exposed these phases explicitly through methods like componentDidMount, componentDidUpdate, and componentWillUnmount.
Mounting is like moving into a new apartment and setting up utilities; updating is living there day to day and rearranging furniture when needed; unmounting is packing up and making sure you've cancelled the mail forwarding and returned the keys.
Key Concepts
1
Function components don't have named lifecycle methods; instead, useEffect (and useLayoutEffect) let you synchronize with these phases by returning a cleanup function and specifying a dependency array. An effect with an empty dependency array runs once after mount and its cleanup runs once on unmount, approximating componentDidMount and componentWillUnmount.
useEffectuseLayoutEffectcomponentDidMountcomponentWillUnmount
2
It's important to understand this mapping isn't perfect — useEffect conceptually models synchronization with an ever-changing set of dependencies rather than named phases, which is a more powerful and more general mental model. Thinking in terms of "this effect must stay in sync with X and Y" rather than "this runs on mount" avoids many stale-closure bugs.
useEffect
3
Interviewers use this topic to check whether a candidate can bridge class-based and hook-based mental models, and whether they understand that unmount cleanup (removing listeners, cancelling subscriptions, aborting fetches) is essential to prevent memory leaks and warnings about updating state on unmounted components.