Mounting is the phase when a React component is created and its initial rendered representation is inserted into the user interface. A component can mount when a parent condition includes it, and unmount when that condition removes it. section 6.2.1 section 6.0
Mounting matters because it determines when component effects and resources begin:
- Run an effect once after mounting by passing an empty dependency array to useEffect. section 6.1.1
- Start resources such as timers on mount, then return cleanup logic so they stop on unmount. section 6.1.2
- Avoid repeatedly mounting a data-loading component when toggling visibility, or move its data fetching and storage higher in the component tree. section 6.2.1
A stopwatch that follows the mount lifecycle
function Stopwatch() { const [seconds, setSeconds] = useState(0); useEffect(() => { const interval = setInterval( () => setSeconds((seconds) => seconds + 1), 1000 ); return () => clearInterval(interval); }, []); return <h1>Seconds: {seconds}</h1>; } The empty dependency array starts the interval when Stopwatch mounts. The returned cleanup function clears it when the component unmounts. section 6.1.2
Figure 6.4 To make the effect hook activate with an effect and cleanup only on mount and unmount, respectively, you must add an empty dependency array to make sure that the effect and cleanup never runs just because the component is re-rendering.
Use the lifecycle diagram to see why an empty dependency array limits the effect and its cleanup to mounting and unmounting rather than ordinary re-renders. section 6.1.2
Mounting also affects asynchronous work. A remote dropdown can load options when it mounts, but if it unmounts before the response arrives, cleanup should cancel the request or prevent a stale state update. section 6.1.1 section 6.1.2
