Lifecycle Hooks in Depth

Module 3's "The Component Lifecycle" lesson introduced the basic hooks; this lesson covers the ordering in depth, which matters once components nest.

• constructor() and connectedCallback() fire top-down — parent before child. A parent begins constructing/connecting before its children do, since the parent has to exist first to contain them.
• renderedCallback() fires bottom-up — child before parent. Children must finish rendering before their parent can be considered fully rendered, so the parent's renderedCallback fires last.
• disconnectedCallback() fires top-down, same as connection — parent first, then children, as the tree is torn down.

A common bug: reading a child's rendered content from a parent's renderedCallback too early, assuming parent-then-child order everywhere — but rendering is bottom-up, so by the time the parent's renderedCallback fires, every child has already finished. Getting this backwards (assuming top-down for renderedCallback) leads to reading stale or incomplete child state.

export default class DashboardContainer extends LightningElement {
    hasError = false;

    errorCallback(error, stack) {
        this.hasError = true;
        console.error('A child component failed:', error, stack);
    }
}

errorCallback(error, stack) is a special hook available on a parent component — it catches errors thrown during a child's lifecycle hooks or rendering, letting the parent recover gracefully (e.g. showing a fallback message) instead of the whole component tree breaking.