implement shouldUpdate method/hook

web/static/src/ts/core/Widget.ts

@@ -83,7 +83,9 @@ export class Widget<T extends WEnv> {
 
   mounted() {}
 
-  propsUpdated(newProps: any) {}
+  shouldUpdate(nextProps: any): boolean {
+    return true;
+  }
 
   willUnmount() {}
 
@@ -138,16 +140,17 @@ export class Widget<T extends WEnv> {
    * Note: it is ok to call updateState before the widget is started. In that
    * case, it will simply update the state and will not rerender
    */
-  async updateState(newState: Object) {
+  async updateState(nextState: Object) {
-    Object.assign(this.state, newState);
+    Object.assign(this.state, nextState);
     if (this.__widget__.isStarted) {
       await this.render();
     }
   }
 
-  updateProps(props?: any): Promise<void> {
+  updateProps(nextProps?: any): Promise<void> {
-    this.props = props;
+    const shouldUpdate = this.shouldUpdate(nextProps);
-    return this.render();
+    this.props = nextProps;
+    return shouldUpdate ? this.render() : Promise.resolve();
   }
 
   //--------------------------------------------------------------------------

web/static/tests/core/widget.test.ts

@@ -372,6 +372,25 @@ describe("lifecycle hooks", () => {
       "p destroyed"
     ]);
   });
+
+  test("shouldUpdate hook prevent rerendering", async () => {
+    let shouldUpdate = false;
+    class TestWidget extends Widget<WEnv> {
+      name = "a";
+      template = `<div><t t-esc="props.val"/></div>`;
+      shouldUpdate() {
+        return shouldUpdate;
+      }
+    }
+    const widget = new TestWidget(env, { val: 42 });
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div>42</div>");
+    await widget.updateProps({ val: 123 });
+    expect(fixture.innerHTML).toBe("<div>42</div>");
+    shouldUpdate = true;
+    await widget.updateProps({ val: 666 });
+    expect(fixture.innerHTML).toBe("<div>666</div>");
+  });
 });
 
 describe("destroy method", () => {