OWL JS Component Lifecycle – Complete Overview

MOUNTING
  │
  ├─ setup()                  ← synchronous: call hooks, init state, get services
  │
  ├─ onWillStart()            ← async: fetch initial data before first render
  │
  ├─ [first render]           ← template compiled → virtual DOM produced
  │
  ├─ onMounted()              ← DOM is in the document: measure, focus, attach listeners
  │
UPDATING (on state change or new props)
  │
  ├─ onWillUpdateProps(nextProps)  ← async: prep before props update
  │      (only when props change)
  │
  ├─ onWillPatch()            ← sync: read current DOM state before patch
  │
  ├─ [re-render + DOM patch]  ← minimal DOM updates applied
  │
  ├─ onPatched()              ← sync: DOM fully updated, read new measurements
  │
UNMOUNTING
  │
  ├─ onWillUnmount()          ← sync: clear timers, listeners, subscriptions
  │
  └─ [component destroyed]

import {
  Component, xml, useState,
  onWillStart, onMounted, onWillPatch,
  onPatched, onWillUnmount, onWillUpdateProps
} from "@odoo/owl";

class MyComponent extends Component {
  static template = xml`<div t-esc="state.data"/>`;

  // State can be declared as a class field (equivalent to calling useState in setup)
  state = useState({ data: null, isLoading: false });

  setup() {
    // All hook registrations go here
    onWillStart(async () => {
      this.state.isLoading = true;
      this.state.data = await fetchData();
      this.state.isLoading = false;
    });

    onMounted(() => {
      console.log("DOM is ready:", this.el);
    });

    onWillUnmount(() => {
      console.log("Cleanup time");
    });
  }
}

// ── Option A: class fields (concise, preferred for simple state) ──
class Counter extends Component {
  state = useState({ count: 0 });  // equivalent to calling useState in setup

  increment() { this.state.count++; }
}

// ── Option B: setup() (needed for hooks + service injection) ──
class Counter extends Component {
  setup() {
    this.state = useState({ count: 0 });

    // setup() is required when you also need lifecycle hooks
    onMounted(() => { console.log("mounted!"); });
  }

  increment() { this.state.count++; }
}

// ── Mixing both — common pattern ──
class UserDashboard extends Component {
  // Simple state as class field
  ui = useState({ isLoading: true, error: null });

  setup() {
    // Services must be obtained in setup()
    this.rpc     = useService("rpc");
    this.user    = useService("user");

    // Hooks must be called in setup()
    onWillStart(async () => {
      await this.loadData();
    });
  }
}

Mounting order:
  1. Parent setup()
  2. Parent onWillStart()         ← awaited
  3. Parent first render begins
     4. Child setup()
     5. Child onWillStart()       ← awaited
     6. Child first render
     7. Child DOM inserted
     8. Child onMounted()
  9. Parent DOM fully inserted
  10. Parent onMounted()          ← parent fires AFTER all children mounted

Unmounting order:
  1. Parent onWillUnmount()       ← parent fires FIRST
  2. Children onWillUnmount()     ← then children, in reverse render order
  3. DOM removed

class Panel extends Component {
  static template = xml`
    <div class="panel">
      <p>Panel content</p>
    </div>
  `;

  setup() {
    onMounted(() => {
      // this.el is the <div class="panel"> element
      const height = this.el.getBoundingClientRect().height;
      console.log("Panel height:", height);
    });

    onWillUnmount(() => {
      // this.el is still valid here — last chance to read/clean up DOM
      console.log("About to remove:", this.el);
    });
  }
}

function useAutoFocus() {
  onMounted(() => {
    // This hook also registers onMounted
    const input = document.querySelector(".auto-focus-input");
    if (input) input.focus();
  });
}

class SearchPage extends Component {
  setup() {
    // Component registers its own onMounted
    onMounted(() => {
      console.log("Page mounted, logging analytics");
    });

    // Custom hook registers another onMounted internally
    useAutoFocus();

    // Both fire when the component mounts — order: registration order
  }
}