How to Use the useBus Hook to Communicate Between OWL Components in Odoo18

If you’ve spent any time building with Odoo’s OWL framework, you’ve probably hit a wall. You’ve got two awesome components, but they live in different parts of the UI.How can you maintain communication between your components without your code becoming completely disorganised? Allow me to present to you the useBus hook in Odoo18, a lifesaver. Since it’s more of a secret weapon for creating apps where components can communicate without being hardwired together, calling it a “utility” feels like a shorthand for what it is Let’s go over how it works with a quick example that you can use right now.

So, What’s the Big Deal with useBus Hook in Odoo18?

Picture it like a radio station for your app. One component can grab the microphone and broadcast a message (an “event”) on a specific frequency (the “bus”). Any other component, no matter where it is, can tune into that frequency and react when it hears the message.

What makes this so clever is how it handles the boring stuff for you. It sets up the listener when a component loads and—this is the crucial part—it cleans up after itself, removing the listener when the component is gone. That means no more memory leaks from forgotten, ‘zombie’ listeners causing chaos. It gives your components the freedom to interact without getting tangled up in messy parent-child chains.

The Syntax, Made Simple

Getting this up and running is pretty straightforward. First, you just need to pull it into your file:

You then make the call right inside your component’s setup method, like this:

Let’s quickly translate that:

• bus: Consider “this.env.bus” to be your own Odoo radio channel. You will mostly utilise it to transmit and receive real-time communications throughout the system.

• eventName: Think of this as the secret code for your message, like “new-order-received” or “cart-updated”. It’s how your components know what to listen for.
• callback: This is just the function that fires off when the event comes in—your code, ready to roll.

The useBus hook in Odoo18 handles all the behind-the-scenes setup and cleanup, so you can focus on what you want to happen without sweating the details.

Let’s Build Something: A Simple Counter App

Theory is one thing, but code is another. Let’s create a simple counter with two separate components in the systray to see how this works in practice.

1. The CounterView: Its only job is to show a number.
2. The Counter: It just has a button that, when clicked, needs to tell the CounterView to update.

They don’t know anything about each other. Their only connection is the event bus.

The JavaScript Logic

Here’s the code that brings it to life.

The XML Templates

And here are the templates that give our components a face.

So what happens when someone clicks that button?

1. The click on the Counter component’s button runs its increment method.
2. That method calls this.env.bus.trigger(“increment”), effectively broadcasting the message.
3. Over in the CounterView, the useBus hook that’s been listening since setup immediately catches the “increment” signal.
4. It runs the callback function we gave it, which in turn calls the increment method inside CounterView.
5. When you bump up state.value by one, the useState hook tells OWL to automatically refresh the component, so the new number pops up on the screen without any extra work

Why You Need This in Your Toolbox

• It keeps things tidy: Your components don’t have to know each other exists, which makes your code way easier to manage, test, and tweak down the road.
  
• Perfect for app-wide updates: It’s a lifesaver when one action needs to light up multiple parts of your UI—like a notification bell, a status bar, and a dashboard all updating the moment a new message rolls in.
• Avoids “prop drilling”: You can skip the headache of passing data down through multiple layers of components that don’t even need it.

A Few Tips and Traps to Avoid

Before you go all-in, keep these pointers in mind to stay out of trouble:

• Be Specific with Event Names. Don’t use a generic name like save. Go for something unique like my_module.form_saved to prevent strange bugs from other apps listening to the same thing.
• Don’t Abuse It. The event bus is for broadcasting. If two components are really a single unit (like a list and its items), passing data with props is still the cleaner, more direct way to go.
• Beware of Silent Errors. If your callback function has a bug, the event will fire but your UI just won’t update. Keep your browser’s developer console open while you’re working to catch these.
• Manual Listeners are Risky. If you ever step outside useBus and set up a listener with bus.on(), it’s on you to tear it down with bus.off() when the component unmounts. You just made a memory leak if you forget. Just use useBus hook in Odoo18 —it does it for you.