OWL JS onWillPatch & onPatched – Before and After Re-render

Trigger: state mutation or new props
  │
  ├─ onWillUpdateProps(nextProps)   ← only when props change (async, awaited)
  │
  ├─ onWillPatch()                  ← sync, fires before virtual DOM diff
  │      read current DOM here: scroll position, focus, measurements
  │
  ├─ [virtual DOM diff + DOM patch] ← OWL applies minimal DOM changes
  │
  └─ onPatched()                    ← sync, fires after DOM is updated
         react to new DOM: restore scroll, update external lib, measure

import { Component, xml, useState, onWillPatch, onPatched, useRef } from "@odoo/owl";

class MessageList extends Component {
  static template = xml`
    <div class="message-list" t-ref="list">
      <div t-foreach="props.messages" t-as="msg" t-key="msg.id"
           class="message" t-esc="msg.text"/>
    </div>
  `;

  static props = {
    messages: { type: Array },
  };

  listRef = useRef("list");

  // Store scroll state between renders
  _scrollTop    = 0;
  _scrollHeight = 0;

  setup() {
    onWillPatch(() => {
      // Capture scroll position before the DOM is patched
      const el = this.listRef.el;
      if (el) {
        this._scrollTop    = el.scrollTop;
        this._scrollHeight = el.scrollHeight;
      }
    });

    onPatched(() => {
      const el = this.listRef.el;
      if (!el) return;

      const newScrollHeight = el.scrollHeight;
      const isAtBottom      = this._scrollTop + el.clientHeight >= this._scrollHeight - 5;

      if (isAtBottom) {
        // User was at the bottom — keep them at the bottom after new messages added
        el.scrollTop = newScrollHeight;
      } else {
        // User scrolled up — preserve their position
        el.scrollTop = this._scrollTop + (newScrollHeight - this._scrollHeight);
      }
    });
  }
}

class LiveChart extends Component {
  static template = xml`
    <div>
      <canvas t-ref="canvas"></canvas>
      <button t-on-click="addDataPoint">Add point</button>
    </div>
  `;

  canvasRef = useRef("canvas");
  chart     = null;

  state = useState({
    data: [10, 25, 18, 40, 32],
  });

  setup() {
    onMounted(() => {
      // Initialize chart after first render
      this.chart = new Chart(this.canvasRef.el, {
        type:    "line",
        data:    { datasets: [{ data: this.state.data }] },
      });
    });

    onPatched(() => {
      // After every state update, sync the chart with new data
      if (this.chart) {
        this.chart.data.datasets[0].data = [...this.state.data];
        this.chart.update();           // Chart.js re-draws
      }
    });

    onWillUnmount(() => {
      this.chart?.destroy();
    });
  }

  addDataPoint() {
    this.state.data.push(Math.floor(Math.random() * 60));
    // ↑ triggers re-render → onPatched fires → chart.update() called
  }
}

class PriceDisplay extends Component {
  static template = xml`
    <span t-ref="price" t-esc="props.price"/>
  `;

  static props = { price: { type: Number } };

  priceRef  = useRef("price");
  _prevPrice = null;

  setup() {
    onWillPatch(() => {
      this._prevPrice = this.props.price;  // save current before update
    });

    onPatched(() => {
      const el = this.priceRef.el;
      if (!el || this.props.price === this._prevPrice) return;

      // Price changed — trigger flash animation
      const cls = this.props.price > this._prevPrice ? "flash-green" : "flash-red";
      el.classList.add(cls);
      el.addEventListener("animationend", () => el.classList.remove(cls), { once: true });
    });
  }
}