diff --git a/addons/website/static/src/components/dialog/page_properties.js b/addons/website/static/src/components/dialog/page_properties.js
index b3c6a12fbf0..7fa3d7ca90d 100644
--- a/addons/website/static/src/components/dialog/page_properties.js
+++ b/addons/website/static/src/components/dialog/page_properties.js
@@ -9,7 +9,7 @@ import {WebsiteDialog} from './dialog';
 import {FormViewDialog} from "@web/views/view_dialogs/form_view_dialog";
 import { qweb } from 'web.core';
 
-const {Component, onWillStart, useState, xml, useRef} = owl;
+const { Component, useEffect, useState, xml, useRef } = owl;
 
 export class PageDependencies extends Component {
     setup() {
@@ -22,22 +22,44 @@ export class PageDependencies extends Component {
             this.orm = useWowlService('orm');
         }
 
-        this.dependencies = {};
-        this.depText = '...';
         this.action = useRef('action');
         this.sprintf = sprintf;
 
-        onWillStart(() => this.onWillStart());
+        useEffect(
+            () => {
+                this.onWillStart();
+            },
+            () => []
+        );
+        this.state = useState({
+            dependencies: {},
+            depText: "...",
+        });
     }
 
     async onWillStart() {
-        this.dependencies = await this.orm.call(
+        // TODO Remove in master: call fetchDependencies in useEffect.
+        return this.fetchDependencies();
+    }
+
+    // TODO Remove in master: use state from template.
+    get dependencies() {
+        return this.state.dependencies;
+    }
+
+    // TODO Remove in master: use state from template.
+    get depText() {
+        return this.state.depText;
+    }
+
+    async fetchDependencies() {
+        this.state.dependencies = await this.orm.call(
             'website',
             'search_url_dependencies',
             [this.props.resModel, this.props.resIds],
         );
         if (this.props.mode === 'popover') {
-            this.depText = Object.entries(this.dependencies)
+            this.state.depText = Object.entries(this.state.dependencies)
                 .map(dependency => `${dependency[1].length} ${dependency[0].toLowerCase()}`)
                 .join(', ');
         }
@@ -49,7 +71,9 @@ export class PageDependencies extends Component {
             boundary: 'viewport',
             placement: 'right',
             trigger: 'focus',
-            content: qweb.render('website.PageDependencies.Tooltip', {dependencies: this.dependencies}),
+            content: qweb.render("website.PageDependencies.Tooltip", {
+                dependencies: this.state.dependencies,
+            }),
         }).popover('toggle');
     }
 }