The Component Lifecycle
By the end of this lesson, you'll be able to:
- Name the core lifecycle hooks and the order they fire in
- Explain what constructor(), connectedCallback(), and renderedCallback() are used for
- Recognize why knowing WHEN code runs matters for correctness
Prerequisites: "Component Communication"
What Is a Lifecycle Hook?
A lifecycle hook is a special method that LWC calls automatically at a specific point in a component's existence — you don't call these yourself, you just define them, and the framework invokes them at the right time.
The Core Hooks, in Order
constructor() → the component instance is being created
connectedCallback() → the component has been inserted into the DOM
(render happens — LWC processes the template)
renderedCallback() → the component has finished renderingconnectedCallback() is the most commonly used hook for initial setup — like kicking off a data request as soon as the component appears on the page.
A Simple Example
import { LightningElement } from 'lwc';
export default class LifecycleDemo extends LightningElement {
connectedCallback() {
console.log('Component connected to the DOM');
}
renderedCallback() {
console.log('Component finished rendering');
}
}Why This Matters in Real Projects
Knowing exactly when your code runs is essential for correctness — code that depends on the DOM already existing needs to run in renderedCallback(), not constructor(), where the template hasn't rendered yet. Module 11 goes deep on the remaining hooks (disconnectedCallback, errorCallback) and the edge cases around how often renderedCallback() actually fires.
Exercise
Put these three lifecycle hooks in the order they actually fire: renderedCallback, constructor, connectedCallback.
Show hint
The instance has to exist before it can be added to the DOM, before it can render.
Exercise
Challenge: explain why fetching data as soon as a component appears on the page belongs in connectedCallback rather than the constructor.
Show hint
Consider what constructor is meant for versus what connectedCallback signals.
The Component Lifecycle Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
A first, intro-level look at lifecycle hooks — special methods LWC calls automatically at specific points in a component's life. Module 11 covers the full set, including disconnectedCallback, errorCallback, and real edge cases.