A component lifecycle is the sequence of creation, mounting, updating, and unmounting. Managing these stages lets a component run the right work as it enters, changes, and leaves the DOM. section 13.0
Treat each lifecycle stage as a distinct responsibility:
- Creation establishes the component instance and its initial state. section 9.4
- Mounting places the component and its managed DOM subtree into the document. section 13.0 section 9.4
- Updating changes state and patches the component’s view, including its children. section 1.2.1 section 9.4
- Unmounting removes the component from the DOM and gives it a point for departure-related work. section 13.0
Lifecycle hooks are user-defined functions associated with these events. A mounted hook can start asynchronous work such as fetching data, allowing the component to show a loading indicator before replacing it with the result. That work must not delay the application’s first render. section 13.0
Figure 1.2 Architecture of the framework we’ll build
Use the framework architecture to trace how component lifecycle management connects with state, rendering, and DOM reconciliation. section 1.2.1
