In the Odoo ecosystem, you rarely build everything from scratch. Usually, you need to add a button to the standard ListRenderer or change how the FormController behaves. Because OWL uses setup(), standard JavaScript inheritance (extends) doesn't always work perfectly for modifying existing core components.

Odoo provides a specific utility for this: patch.

How to safely override an existing component:

Instead of rewriting a core file, you "patch" it. This injects your custom logic directly into the original component.

JavaScript

import { patch } from "@web/core/utils/patch";
import { ListRenderer } from "@web/views/list/list_renderer";
import { onWillStart } from "@odoo/owl";
// Patching the standard Odoo List Renderer
patch(ListRenderer.prototype, {
    setup() {
        // Always call the original setup first using super!
        super.setup(...arguments); 
        
        // Now add your custom logic
        onWillStart(async () => {
            console.log("Custom logic added to the List View!");
        });
    }
});

Pro Tip: Always remember to call super.setup(...arguments) when patching, or you will completely break the original component's lifecycle!

To truly master OWL, you need to write code that is safe, reusable, and easy to debug.

1. Stop Guessing: Use the OWL DevTools

Most developers rely on console.log, but there is an official OWL DevTools browser extension for Chrome and Firefox. It adds a tab to your browser's inspect menu where you can click on any component, see its exact state, and watch variables change in real-time.

2. Prop Validation (Safety First)

When passing data to components, a simple typo can crash your UI. Prop validation acts as a bouncer, ensuring your components only get the data types they expect. For example, if your attendance kiosk expects an employeeId as a Number, but receives a String, OWL will warn you immediately in the console.

JavaScript

AttendanceKiosk.props = {
    employeeId: { type: Number },
    greetingText: { type: String, optional: true } // Won't crash if missing
};

3. Slots (Building Reusable Wrappers)

Imagine building a popup modal for a file previewer. Sometimes you want to show a PDF inside it, and other times an Image. Instead of creating two different modals, you create one Modal component with a Slot. A slot is an empty placeholder where you can inject custom XML later.

XML

<div class="my-modal">
    <h2>Preview</h2>
    <t t-slot="default"/> 
</div>

<Modal>
    <img src="my_image.png"/>
</Modal>

If setup() is your component's starting line, Hooks are the tools you pack in your backpack before the race starts. They allow your component to interact with the outside world—like the browser window, the lifecycle, or the physical HTML elements—safely and cleanly.

The Golden Rule of Hooks

Before you use any hook, you must memorize one unbreakable rule: Hooks can only be called synchronously inside setup(). You cannot put a hook inside an if statement, a loop, or after an await pause. OWL needs to register every single hook the exact moment the component is born.

1. useRef (Touching the DOM Safely)

Eventually, you will need to grab a physical HTML element. Maybe you need to inject a PDF viewer into a specific div for a Universal File Previewer, or focus a cursor inside an input box.

The Beginner Mistake: Using document.getElementById('my-box'). If you have two of the same components on the screen, this will grab the wrong box and break your UI.

The Pro Solution: Use useRef. It safely grabs the exact element inside this specific component.

JavaScript

import { Component, useRef, onMounted } from "@odoo/owl";
class FilePreviewer extends Component {
    setup() {
        // 1. Tell OWL you want to reference an element called "viewer"
        this.viewerRef = useRef("viewer");
        onMounted(() => {
            // 2. The physical element is now safely available inside .el
            console.log(this.viewerRef.el); 
            // Now you can inject your PDF library into this exact element
        });
    }
}
// 3. In your XML, tag the element with t-ref
FilePreviewer.template = xml`
    <div>
        <div t-ref="viewer" class="pdf-container"></div>
    </div>
`;

2. useExternalListener (The Memory Saver)

What if you are building an Attendance Kiosk and you need to listen for a barcode scanner hitting the keyboard anywhere on the screen? Or you want a user to hit the Escape key to close a modal?

If you manually use window.addEventListener, you must remember to remove it when the component closes. If you forget, it creates a memory leak, and your module will eventually crash the browser.

useExternalListener handles the cleanup for you automatically. When the component dies, the listener dies with it.

JavaScript

import { Component, useExternalListener } from "@odoo/owl";
class AttendanceKiosk extends Component {
    setup() {
        // Listens to every keydown event on the entire window
        useExternalListener(window, "keydown", this.onBarcodeScan);
    }
    onBarcodeScan(event) {
        if (event.key === "Enter") {
            // Process the scanned employee badge
            console.log("Barcode submitted!");
        }
    }
}

3. The Lifecycle Hooks: onMounted and onWillUnmount

We already discussed onWillStart (for fetching data before rendering), but there are two other massive lifecycle hooks:

onMounted: Runs the exact millisecond your component is successfully drawn on the screen. This is where you trigger third-party libraries (like drawing a chart) because the HTML finally exists.

onWillUnmount: Runs right before your component is destroyed. Use this to clean up custom intervals or background tasks you started so they don't keep running like ghosts in the background.

JavaScript

import { Component, onMounted, onWillUnmount } from "@odoo/owl";
class DashboardTimer extends Component {
    setup() {
        onMounted(() => {
            // Start a timer when the component appears
            this.timer = setInterval(() => console.log("Tick"), 1000);
        });
        onWillUnmount(() => {
            // Stop the timer when the user navigates away!
            clearInterval(this.timer);
        });
    }
}

📋 The Ultimate OWL Hooks Cheat Sheet

To make your life easier, here is a complete list of the core hooks available in OWL, categorized by what they do.

1. Lifecycle Hooks (Timing is Everything)

These hooks let you run code at very specific moments in a component's life.

Hook	Human-Friendly Definition	Real-World Use Case
onWillStart	"Wait for me before you draw the screen."	Fetching data from the Odoo database via RPC.
onMounted	"I am officially on the screen now!"	Targeting a DOM element to initialize a 3rd-party library (like a Chart).
onWillUpdateProps	"My parent just gave me new data."	A parent changes the recordId, so the child needs to fetch new info.
onWillPatch	"The screen is about to refresh."	Saving the user's scroll position before a list updates.
onPatched	"The screen just finished refreshing."	Restoring the scroll position you just saved.
onWillUnmount	"I am being destroyed. Goodbye."	Clearing setInterval timers so they don't cause memory leaks.
onError	"One of my child components just crashed!"	Showing a friendly "Failed to load" message if a file previewer breaks, instead of crashing the whole page.

2. Reactivity & DOM Hooks (Handling Data and Screens)

These hooks help you manage the physical HTML and the data that powers it.

3. Environment Hooks (Advanced Communication)

The env (Environment) is like a global backpack shared by all components. These hooks let you interact with it.

Odoo Developer Bonus: While not technically a pure OWL hook, Odoo provides useService("name"). You will use this constantly in setup() to grab Odoo's built-in tools like orm (database calls), notification (toast messages), or action (opening new views).