[REL] v2.0.0-beta-4

# v2.0.0-beta.4

- fix: useEffect properly handle errors in effect function
- imp: reactivity: add missing support for forEach method
- imp: component: add name property on nodes for debug purposes
- imp: component: emit warning when async hooks take too long
- fix: blockdom: t-att- correcltly sets the value to zero
- fix: reactivity: do not crash when reading reactive frozen objects
- fix: utils: fix calls to batched callback from within the callback
- imp: component: wait for parent rendering to be complete before rendering child

README.md

@@ -82,6 +82,7 @@ Are you new to Owl? This is the place to start!
 - [Component](doc/reference/component.md)
 - [Component Lifecycle](doc/reference/component.md#lifecycle)
 - [Concurrency Model](doc/reference/concurrency_model.md)
+- [Dev mode](doc/reference/app.md#dev-mode)
 - [Dynamic sub components](doc/reference/component.md#dynamic-sub-components)
 - [Environment](doc/reference/environment.md)
 - [Error Handling](doc/reference/error_handling.md)

doc/learning/tutorial_todoapp.md

@@ -240,7 +240,7 @@ class Task extends Component {
   static template = xml /* xml */`
     <div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
       <input type="checkbox" t-att-checked="props.task.isCompleted"/>
-      <span><t t-esc="props.task.title"/></span>
+      <span><t t-esc="props.task.text"/></span>
     </div>`;
   static props = ["task"];
 }
@@ -743,7 +743,7 @@ the user experience.
 ```xml
 <input type="checkbox" t-att-checked="props.task.isCompleted"
     t-att-id="props.task.id"
-    t-on-click="dispatch('toggleTask', props.task.id)"/>
+    t-on-click="() => store.toggleTask(props.task)"/>
 <label t-att-for="props.task.id"><t t-esc="props.task.text"/></label>
 ```
 

doc/reference/app.md

@@ -51,11 +51,10 @@ The `config` object is an object with some of the following keys:
 
 - **`env (object)`**: if given, this will be the shared `env` given to each component
 - **`props (object)`**: the props given to the root component
-- **`dev (boolean, default=false)`**: if `true`, the application is rendered in `dev`
-  mode, which activates some additional checks (in particular, the props validation
-  code is only performed in dev mode)
+- **`dev (boolean, default=false)`**: if `true`, the application is rendered in
+  [`dev` mode](#dev-mode);
 - **`test (boolean, default=false)`**: `test` mode is the same as `dev` mode, except
-  that Owll will not log a message to warn that Owl is in `dev` mode.
+  that Owl will not log a message to warn that Owl is in `dev` mode.
 - **`translatableAttributes (string[])`**: a list of additional attributes that should
   be translated (see [translations](translations.md))
 - **`translateFn (function)`**: a function that will be called by owl to translate
@@ -110,3 +109,13 @@ const { loadFile, mount } = owl;
   mount(Root, document.body, { env });
 })();
 ```
+
+## Dev mode
+
+Dev mode activates some additional checks and developer amenities:
+
+- [Props validation](./props.md#props-validation) is performed
+- [t-foreach](./templates.md#loops) loops check for key unicity
+- Lifecycle hooks are wrapped to report their errors in a more developer-friendly way
+- onWillStart and onWillUpdateProps will emit a warning in the console when they
+  take longer than 3 seconds in an effort to ease debugging the presence of deadlocks

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta-4",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "browser": "dist/owl.iife.js",

src/app/app.ts

@@ -101,6 +101,7 @@ export class App<
 
   destroy() {
     if (this.root) {
+      this.scheduler.flush();
       this.root.destroy();
     }
   }

src/blockdom/attributes.ts

@@ -139,7 +139,8 @@ export function updateClass(this: HTMLElement, val: any, oldVal: any) {
 
 export function makePropSetter(name: string): Setter<HTMLElement> {
   return function setProp(this: HTMLElement, value: any) {
-    (this as any)[name] = value || "";
+    // support 0, fallback to empty string for other falsy values
+    (this as any)[name] = value === 0 ? 0 : value || "";
   };
 }
 

src/component/component_node.ts

@@ -2,23 +2,16 @@ import type { App, Env } from "../app/app";
 import { BDom, VNode } from "../blockdom";
 import {
   clearReactivesForCallback,
+  getSubscriptions,
+  NonReactive,
   Reactive,
   reactive,
   TARGET,
-  NonReactive,
-  getSubscriptions,
 } from "../reactivity";
 import { batched, Callback } from "../utils";
 import { Component, ComponentConstructor } from "./component";
 import { fibersInError, handleError } from "./error_handling";
-import {
-  Fiber,
-  makeChildFiber,
-  makeRootFiber,
-  MountFiber,
-  MountOptions,
-  RootFiber,
-} from "./fibers";
+import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
 import { applyDefaultProps } from "./props_validation";
 import { STATUS } from "./status";
 
@@ -58,13 +51,6 @@ export function useState<T extends object>(state: T): Reactive<T> | NonReactive<
     batchedRenderFunctions.set(node, render);
     // manual implementation of onWillDestroy to break cyclic dependency
     node.willDestroy.push(clearReactivesForCallback.bind(null, render));
-    if (node.app.dev) {
-      Object.defineProperty(node, "subscriptions", {
-        get() {
-          return getSubscriptions(render);
-        },
-      });
-    }
   }
   return reactive(state, render);
 }
@@ -133,6 +119,7 @@ export function component<P extends object>(
 
     node.initiateRender(new Fiber(node, parentFiber));
   }
+  parentFiber.root!.reachedChildren.add(node);
   return node;
 }
 
@@ -200,7 +187,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
       return;
     }
     if (this.status === STATUS.NEW && this.fiber === fiber) {
-      this._render(fiber);
+      fiber.render();
     }
   }
 
@@ -245,16 +232,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
     //   embedded in a rendering coming from above, so the fiber will be rendered
     //   in the next microtick anyway, so we should not render it again.
     if (this.fiber === fiber && (current || !fiber.parent)) {
-      this._render(fiber);
-    }
-  }
-
-  _render(fiber: Fiber | RootFiber) {
-    try {
-      fiber.bdom = this.renderFn();
-      fiber.root!.counter--;
-    } catch (e) {
-      handleError({ node: this, error: e });
+      fiber.render();
     }
   }
 
@@ -298,7 +276,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
       return;
     }
     component.props = props;
-    this._render(fiber);
+    fiber.render();
     const parentRoot = parentFiber.root!;
     if (this.willPatch.length) {
       parentRoot.willPatch.push(fiber);
@@ -394,4 +372,16 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
       }
     }
   }
+
+  // ---------------------------------------------------------------------------
+  // Some debug helpers
+  // ---------------------------------------------------------------------------
+  get name(): string {
+    return this.component.constructor.name;
+  }
+
+  get subscriptions(): ReturnType<typeof getSubscriptions> {
+    const render = batchedRenderFunctions.get(this);
+    return render ? getSubscriptions(render) : [];
+  }
 }

src/component/error_handling.ts

@@ -30,7 +30,8 @@ function _handleError(node: ComponentNode | null, error: any, isFirstRound = fal
 
     if (stopped) {
       if (isFirstRound && fiber && fiber.node.fiber) {
-        fiber.root!.counter--;
+        const root = fiber.root!;
+        root.setCounter(root.counter - 1);
       }
       return true;
     }

src/component/fibers.ts

@@ -8,6 +8,10 @@ export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
   if (current) {
     cancelFibers(current.children);
     current.root = null;
+    if (current instanceof RootFiber && current.delayedRenders.length) {
+      let root = parent.root!;
+      root.delayedRenders = root.delayedRenders.concat(current.delayedRenders);
+    }
   }
   return new Fiber(node, parent);
 }
@@ -16,9 +20,12 @@ export function makeRootFiber(node: ComponentNode): Fiber {
   let current = node.fiber;
   if (current) {
     let root = current.root!;
-    root.counter = root.counter + 1 - cancelFibers(current.children);
+    root.setCounter(root.counter + 1 - cancelFibers(current.children));
     current.children = [];
     current.bdom = null;
+    if (current === root) {
+      root.reachedChildren = new WeakSet();
+    }
     if (fibersInError.has(current)) {
       fibersInError.delete(current);
       fibersInError.delete(root);
@@ -74,13 +81,53 @@ export class Fiber {
     if (parent) {
       this.deep = parent.deep;
       const root = parent.root!;
-      root.counter++;
+      root.setCounter(root.counter + 1);
       this.root = root;
       parent.children.push(this);
     } else {
       this.root = this as any;
     }
   }
+
+  render() {
+    // if some parent has a fiber => register in followup
+    let prev = this.root!.node;
+    let current = prev.parent;
+    while (current) {
+      if (current.fiber) {
+        let root = current.fiber.root!;
+        if (root.counter) {
+          root.delayedRenders.push(this);
+          return;
+        } else {
+          if (!root.reachedChildren.has(prev)) {
+            // is dead
+            this.node.app.scheduler.shouldClear = true;
+            return;
+          }
+          current = root.node;
+        }
+      }
+      prev = current;
+      current = current.parent;
+    }
+
+    // there are no current rendering from above => we can render
+    this._render();
+  }
+
+  _render() {
+    const node = this.node;
+    const root = this.root;
+    if (root) {
+      try {
+        this.bdom = node.renderFn();
+        root.setCounter(root.counter - 1);
+      } catch (e) {
+        handleError({ node, error: e });
+      }
+    }
+  }
 }
 
 export class RootFiber extends Fiber {
@@ -94,6 +141,9 @@ export class RootFiber extends Fiber {
   // i.e.: render triggered in onWillUnmount or in willPatch will be delayed
   locked: boolean = false;
 
+  delayedRenders: Fiber[] = [];
+  reachedChildren: WeakSet<ComponentNode> = new WeakSet();
+
   complete() {
     const node = this.node;
     this.locked = true;
@@ -144,6 +194,21 @@ export class RootFiber extends Fiber {
       handleError({ fiber: current || this, error: e });
     }
   }
+
+  setCounter(newValue: number) {
+    this.counter = newValue;
+    if (newValue === 0) {
+      if (this.delayedRenders.length) {
+        for (let f of this.delayedRenders) {
+          if (f.root) {
+            f.render();
+          }
+        }
+        this.delayedRenders = [];
+      }
+      this.node.app.scheduler.flush();
+    }
+  }
 }
 
 type Position = "first-child" | "last-child";

src/component/lifecycle_hooks.ts

@@ -1,14 +1,28 @@
 import { getCurrent } from "./component_node";
 import { nodeErrorHandlers } from "./error_handling";
 
+const TIMEOUT = Symbol("timeout");
 function wrapError(fn: (...args: any[]) => any, hookName: string) {
   const error = new Error(`The following error occurred in ${hookName}: `) as Error & {
     cause: any;
   };
+  const timeoutError = new Error(`${hookName}'s promise hasn't resolved after 3 seconds`);
+  const node = getCurrent();
   return (...args: any[]) => {
     try {
       const result = fn(...args);
       if (result instanceof Promise) {
+        if (hookName === "onWillStart" || hookName === "onWillUpdateProps") {
+          const fiber = node.fiber;
+          Promise.race([
+            result,
+            new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
+          ]).then((res) => {
+            if (res === TIMEOUT && node.fiber === fiber) {
+              console.warn(timeoutError);
+            }
+          });
+        }
         return result.catch((cause) => {
           error.cause = cause;
           if (cause instanceof Error) {

src/component/scheduler.ts

@@ -11,27 +11,16 @@ export class Scheduler {
   // interactions with other code, such as test frameworks that override them
   static requestAnimationFrame = window.requestAnimationFrame.bind(window);
   tasks: Set<RootFiber> = new Set();
-  isRunning: boolean = false;
   requestAnimationFrame: Window["requestAnimationFrame"];
+  frame: number = 0;
+  shouldClear: boolean = false;
 
   constructor() {
     this.requestAnimationFrame = Scheduler.requestAnimationFrame;
   }
 
-  start() {
-    this.isRunning = true;
-    this.scheduleTasks();
-  }
-
-  stop() {
-    this.isRunning = false;
-  }
-
   addFiber(fiber: Fiber) {
     this.tasks.add(fiber.root!);
-    if (!this.isRunning) {
-      this.start();
-    }
   }
 
   /**
@@ -39,7 +28,23 @@ export class Scheduler {
    * Other tasks are left unchanged.
    */
   flush() {
-    this.tasks.forEach((fiber) => {
+    if (this.frame === 0) {
+      this.frame = this.requestAnimationFrame(() => {
+        this.frame = 0;
+        this.tasks.forEach((fiber) => this.processFiber(fiber));
+        if (this.shouldClear) {
+          this.shouldClear = false;
+          for (let task of this.tasks) {
+            if (task.node.status === STATUS.DESTROYED) {
+              this.tasks.delete(task);
+            }
+          }
+        }
+      });
+    }
+  }
+
+  processFiber(fiber: RootFiber) {
     if (fiber.root !== fiber) {
       this.tasks.delete(fiber);
       return;
@@ -60,18 +65,5 @@ export class Scheduler {
       }
       this.tasks.delete(fiber);
     }
-    });
-    if (this.tasks.size === 0) {
-      this.stop();
-    }
-  }
-
-  scheduleTasks() {
-    this.requestAnimationFrame(() => {
-      this.flush();
-      if (this.isRunning) {
-        this.scheduleTasks();
-      }
-    });
   }
 }

src/hooks.ts

@@ -57,7 +57,6 @@ export function useChildSubEnv(envExtension: Env) {
 // useEffect
 // -----------------------------------------------------------------------------
 
-const NO_OP = () => {};
 /**
  * @param {...any} dependencies the dependencies computed by computeDependencies
  * @returns {void|(()=>void)} a cleanup function that reverses the side
@@ -78,11 +77,11 @@ type Effect = (...dependencies: any[]) => void | (() => void);
  *      NaN !== NaN, which will cause the effect to rerun on every patch.
  */
 export function useEffect(effect: Effect, computeDependencies: () => any[] = () => [NaN]) {
-  let cleanup: () => void;
+  let cleanup: (() => void) | void;
   let dependencies: any[];
   onMounted(() => {
     dependencies = computeDependencies();
-    cleanup = effect(...dependencies) || NO_OP;
+    cleanup = effect(...dependencies);
   });
 
   onPatched(() => {
@@ -90,12 +89,14 @@ export function useEffect(effect: Effect, computeDependencies: () => any[] = ()
     const shouldReapply = newDeps.some((val, i) => val !== dependencies[i]);
     if (shouldReapply) {
       dependencies = newDeps;
+      if (cleanup) {
         cleanup();
-      cleanup = effect(...dependencies) || NO_OP;
+      }
+      cleanup = effect(...dependencies);
     }
   });
 
-  onWillUnmount(() => cleanup());
+  onWillUnmount(() => cleanup && cleanup());
 }
 
 // -----------------------------------------------------------------------------

src/reactivity.ts

@@ -232,6 +232,11 @@ function basicProxyHandler<T extends Target>(callback: Callback): ProxyHandler<T
       if (key === TARGET) {
         return target;
       }
+      // non-writable non-configurable properties cannot be made reactive
+      const desc = Object.getOwnPropertyDescriptor(target, key);
+      if (desc && !desc.writable && !desc.configurable) {
+        return Reflect.get(target, key, proxy);
+      }
       observeTargetKey(target, key, callback);
       return possiblyReactive(Reflect.get(target, key, proxy), callback);
     },
@@ -308,6 +313,28 @@ function makeIteratorObserver(
     }
   };
 }
+/**
+ * Creates a forEach function that will delegate to forEach on the underlying
+ * collection while observing key changes, and keys as they're iterated over,
+ * and making the passed keys/values reactive.
+ *
+ * @param target @see reactive
+ * @param callback @see reactive
+ */
+function makeForEachObserver(target: any, callback: Callback) {
+  return function forEach(forEachCb: (val: any, key: any, target: any) => void, thisArg: any) {
+    observeTargetKey(target, KEYCHANGES, callback);
+    target.forEach(function (val: any, key: any, targetObj: any) {
+      observeTargetKey(target, key, callback);
+      forEachCb.call(
+        thisArg,
+        possiblyReactive(val, callback),
+        possiblyReactive(key, callback),
+        possiblyReactive(targetObj, callback)
+      );
+    }, thisArg);
+  };
+}
 /**
  * Creates a function that will delegate to an underlying method, and check if
  * that method has modified the presence or value of a key, and notify the
@@ -370,6 +397,7 @@ const rawTypeToFuncHandlers = {
     values: makeIteratorObserver("values", target, callback),
     entries: makeIteratorObserver("entries", target, callback),
     [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
+    forEach: makeForEachObserver(target, callback),
     clear: makeClearNotifier(target),
     get size() {
       observeTargetKey(target, KEYCHANGES, callback);
@@ -385,6 +413,7 @@ const rawTypeToFuncHandlers = {
     values: makeIteratorObserver("values", target, callback),
     entries: makeIteratorObserver("entries", target, callback),
     [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
+    forEach: makeForEachObserver(target, callback),
     clear: makeClearNotifier(target),
     get size() {
       observeTargetKey(target, KEYCHANGES, callback);

src/utils.ts

@@ -15,11 +15,13 @@ export function batched(callback: Callback): Callback {
     await Promise.resolve();
     if (!called) {
       called = true;
-      callback();
       // wait for all calls in this microtick to fall through before resetting "called"
-      // so that only the first call to the batched function calls the original callback
-      await Promise.resolve();
-      called = false;
+      // so that only the first call to the batched function calls the original callback.
+      // Schedule this before calling the callback so that calls to the batched function
+      // within the callback will proceed only after resetting called to false, and have
+      // a chance to execute the callback again
+      Promise.resolve().then(() => (called = false));
+      callback();
     }
   };
 }

tests/blockdom/block_attributes.test.ts

@@ -169,13 +169,25 @@ describe("properties", () => {
     expect(input.value).toBe("potato");
   });
 
-  test("input with value attribute, and undefined given", () => {
+  test("input with value attribute, and falsy value given", () => {
     const block = createBlock(`<input block-attribute-0="value"/>`);
 
     const tree = block([undefined]);
     mount(tree, fixture);
     const input = fixture.querySelector("input")!;
     expect(input.value).toBe("");
+
+    patch(tree, block([null]));
+    expect(input.value).toBe("");
+
+    patch(tree, block([0]));
+    expect(input.value).toBe("0");
+
+    patch(tree, block([""]));
+    expect(input.value).toBe("");
+
+    patch(tree, block([false]));
+    expect(input.value).toBe("");
   });
 
   test("input type=checkbox with checked attribute", () => {

tests/components/__snapshots__/concurrency.test.ts.snap

@@ -1067,6 +1067,184 @@ exports[`delay willUpdateProps with rendering grandchild 4`] = `
 }"
 `;
 
+exports[`delayed rendering, but then initial rendering is cancelled by yet another render 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`delayed rendering, but then initial rendering is cancelled by yet another render 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`C\`, {value: ctx['state'].someValue+ctx['props'].value}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`delayed rendering, but then initial rendering is cancelled by yet another render 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block3 = createBlock(\`<p><block-text-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = component(\`D\`, {}, key + \`__1\`, node, ctx);
+    let txt1 = ctx['props'].value;
+    const b3 = block3([txt1]);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed rendering, but then initial rendering is cancelled by yet another render 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['increment'], ctx];
+    let txt1 = ctx['state'].val;
+    return block1([hdlr1, txt1]);
+  }
+}"
+`;
+
+exports[`delayed rendering, reusing fiber and stuff 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`delayed rendering, reusing fiber and stuff 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(ctx['props'].value);
+    const b3 = component(\`C\`, {}, key + \`__1\`, node, ctx);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed rendering, reusing fiber and stuff 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['increment'], ctx];
+    let txt1 = ctx['state'].val;
+    return block1([hdlr1, txt1]);
+  }
+}"
+`;
+
+exports[`delayed rendering, reusing fiber then component is destroyed and  stuff 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    b2 = text(\`A\`);
+    if (ctx['state'].value<15) {
+      b3 = component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed rendering, reusing fiber then component is destroyed and  stuff 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(ctx['props'].value);
+    const b3 = component(\`C\`, {}, key + \`__1\`, node, ctx);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed rendering, reusing fiber then component is destroyed and  stuff 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['increment'], ctx];
+    let txt1 = ctx['state'].val;
+    return block1([hdlr1, txt1]);
+  }
+}"
+`;
+
+exports[`delayed rendering, then component is destroyed and  stuff 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`delayed rendering, then component is destroyed and  stuff 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    b2 = text(ctx['props'].value);
+    if (ctx['props'].value<10) {
+      b3 = component(\`C\`, {}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed rendering, then component is destroyed and  stuff 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['increment'], ctx];
+    let txt1 = ctx['state'].val;
+    return block1([hdlr1, txt1]);
+  }
+}"
+`;
+
 exports[`destroying/recreating a subcomponent, other scenario 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/components/__snapshots__/hooks.test.ts.snap

@@ -301,6 +301,19 @@ exports[`hooks useEffect hook effect with empty dependency list never reruns 1`]
 }"
 `;
 
+exports[`hooks useEffect hook properly behaves when the effect function throws 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`hooks useExternalListener 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/components/__snapshots__/lifecycle.test.ts.snap

@@ -658,6 +658,43 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
 }"
 `;
 
+exports[`lifecycle hooks timeout in onWillStart emits a warning 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {prop: ctx['state'].prop};
+    helpers.validateProps(\`Child\`, props1, ctx);
+    return component(\`Child\`, props1, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`\`);
+  }
+}"
+`;
+
 exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/components/__snapshots__/reactivity.test.ts.snap

@@ -1,5 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`reactivity in lifecycle Child component doesn't render when state they depend on changes but their parent is about to unmount them 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].renderChild) {
+      b2 = component(\`Child\`, {state: ctx['state']}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2]);
+  }
+}"
+`;
+
+exports[`reactivity in lifecycle Child component doesn't render when state they depend on changes but their parent is about to unmount them 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['props'].state.content.a);
+  }
+}"
+`;
+
 exports[`reactivity in lifecycle can use a state hook 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/components/concurrency.test.ts

@@ -3,6 +3,7 @@ import {
   Component,
   mount,
   onMounted,
+  onRendered,
   onWillStart,
   onWillUnmount,
   onWillUpdateProps,
@@ -1079,11 +1080,7 @@ test("concurrent renderings scenario 3", async () => {
   stateC.fromC = "d";
   await nextTick();
   expect(fixture.innerHTML).toBe("<div><p><span><i>1c</i></span></p></div>");
-  expect([
-    "ComponentC:willRender",
-    "ComponentD:willUpdateProps",
-    "ComponentC:rendered",
-  ]).toBeLogged();
+  expect([]).toBeLogged();
 
   defB.resolve(); // resolve rendering initiated in A (still blocked in D)
   await nextTick();
@@ -1099,14 +1096,7 @@ test("concurrent renderings scenario 3", async () => {
 
   defsD[0].resolve(); // resolve rendering initiated in C (should be ignored)
   await nextTick();
-  expect(ComponentD.prototype.someValue).toBeCalledTimes(1);
-  expect(fixture.innerHTML).toBe("<div><p><span><i>1c</i></span></p></div>");
-  expect([]).toBeLogged();
-
-  defsD[1].resolve(); // completely resolve rendering initiated in A
-  await nextTick();
   expect(fixture.innerHTML).toBe("<div><p><span><i>2d</i></span></p></div>");
-  expect(ComponentD.prototype.someValue).toBeCalledTimes(2);
   expect([
     "ComponentD:willRender",
     "ComponentD:rendered",
@@ -1119,6 +1109,7 @@ test("concurrent renderings scenario 3", async () => {
     "ComponentB:patched",
     "ComponentA:patched",
   ]).toBeLogged();
+  expect(ComponentD.prototype.someValue).toBeCalledTimes(2);
 });
 
 test("concurrent renderings scenario 4", async () => {
@@ -1207,11 +1198,7 @@ test("concurrent renderings scenario 4", async () => {
   stateC.fromC = "d";
   await nextTick();
   expect(fixture.innerHTML).toBe("<div><p><span><i>1c</i></span></p></div>");
-  expect([
-    "ComponentC:willRender",
-    "ComponentD:willUpdateProps",
-    "ComponentC:rendered",
-  ]).toBeLogged();
+  expect([]).toBeLogged();
 
   defB.resolve(); // resolve rendering initiated in A (still blocked in D)
   await nextTick();
@@ -1227,6 +1214,12 @@ test("concurrent renderings scenario 4", async () => {
 
   defsD[1].resolve(); // completely resolve rendering initiated in A
   await nextTick();
+  expect(fixture.innerHTML).toBe("<div><p><span><i>1c</i></span></p></div>");
+  expect(ComponentD.prototype.someValue).toBeCalledTimes(1);
+  expect([]).toBeLogged();
+
+  defsD[0].resolve(); // resolve rendering initiated in C (should be ignored)
+  await nextTick();
   expect(fixture.innerHTML).toBe("<div><p><span><i>2d</i></span></p></div>");
   expect(ComponentD.prototype.someValue).toBeCalledTimes(2);
   expect([
@@ -1241,12 +1234,6 @@ test("concurrent renderings scenario 4", async () => {
     "ComponentB:patched",
     "ComponentA:patched",
   ]).toBeLogged();
-
-  defsD[0].resolve(); // resolve rendering initiated in C (should be ignored)
-  await nextTick();
-  expect(fixture.innerHTML).toBe("<div><p><span><i>2d</i></span></p></div>");
-  expect(ComponentD.prototype.someValue).toBeCalledTimes(2);
-  expect([]).toBeLogged();
 });
 
 test("concurrent renderings scenario 5", async () => {
@@ -2714,13 +2701,7 @@ test("delay willUpdateProps", async () => {
   parent.render();
   await nextTick();
   expect(fixture.innerHTML).toBe("0_0");
-  expect([
-    "Child:willRender",
-    "Child:rendered",
-    "Parent:willRender",
-    "Child:willUpdateProps",
-    "Parent:rendered",
-  ]).toBeLogged();
+  expect(["Parent:willRender", "Child:willUpdateProps", "Parent:rendered"]).toBeLogged();
 
   promise = makeDeferred();
   const prom2 = promise;
@@ -2837,13 +2818,9 @@ test("delay willUpdateProps with rendering grandchild", async () => {
   await nextTick();
   expect(fixture.innerHTML).toBe("0_0<div></div>");
   expect([
-    "DelayedChild:willRender",
-    "DelayedChild:rendered",
     "GrandParent:willRender",
     "Parent:willUpdateProps",
     "GrandParent:rendered",
-    "ReactiveChild:willRender",
-    "ReactiveChild:rendered",
     "Parent:willRender",
     "DelayedChild:willUpdateProps",
     "ReactiveChild:willUpdateProps",
@@ -2864,8 +2841,6 @@ test("delay willUpdateProps with rendering grandchild", async () => {
     "GrandParent:willRender",
     "Parent:willUpdateProps",
     "GrandParent:rendered",
-    "ReactiveChild:willRender",
-    "ReactiveChild:rendered",
     "Parent:willRender",
     "DelayedChild:willUpdateProps",
     "ReactiveChild:willUpdateProps",
@@ -3254,6 +3229,368 @@ test("rendering parent twice, with different props on child and stuff", async ()
   ]).toBeLogged();
 });
 
+test("delayed rendering, but then initial rendering is cancelled by yet another render", async () => {
+  const promC = makeDeferred();
+  let stateB: any = null;
+
+  class D extends Component {
+    static template = xml`<button t-on-click="increment"><t t-esc="state.val"/></button>`;
+    state = useState({ val: 1 });
+    setup() {
+      useLogLifecycle();
+    }
+    increment() {
+      this.state.val++;
+    }
+  }
+
+  class C extends Component {
+    static template = xml`<D/><p><t t-esc="props.value"/></p>`;
+    static components = { D };
+    setup() {
+      useLogLifecycle();
+      onWillUpdateProps(() => promC);
+    }
+  }
+
+  class B extends Component {
+    static template = xml`<C value="state.someValue + props.value"/>`;
+    static components = { C };
+    state = useState({ someValue: 3 });
+    setup() {
+      useLogLifecycle();
+      stateB = this.state;
+    }
+  }
+
+  class A extends Component {
+    static template = xml`<B value="state.value"/>`;
+    static components = { B };
+    state = useState({ value: 33 });
+    setup() {
+      useLogLifecycle();
+    }
+  }
+
+  const parent = await mount(A, fixture);
+  expect(fixture.innerHTML).toBe("<button>1</button><p>36</p>");
+  expect([
+    "A:setup",
+    "A:willStart",
+    "A:willRender",
+    "B:setup",
+    "B:willStart",
+    "A:rendered",
+    "B:willRender",
+    "C:setup",
+    "C:willStart",
+    "B:rendered",
+    "C:willRender",
+    "D:setup",
+    "D:willStart",
+    "C:rendered",
+    "D:willRender",
+    "D:rendered",
+    "D:mounted",
+    "C:mounted",
+    "B:mounted",
+    "A:mounted",
+  ]).toBeLogged();
+
+  // update B and C, but render is blocked by C willupdateProps
+  stateB.someValue = 5;
+  await nextTick();
+  expect(["B:willRender", "C:willUpdateProps", "B:rendered"]).toBeLogged();
+
+  // update D => render should be delayed, because B is currently rendering
+  fixture.querySelector("button")!.click();
+  await nextTick();
+  expect([]).toBeLogged();
+
+  // update A => render should go to B and cancel it
+  parent.state.value = 34;
+  await nextTick();
+  expect([
+    "A:willRender",
+    "B:willUpdateProps",
+    "A:rendered",
+    "B:willRender",
+    "C:willUpdateProps",
+    "B:rendered",
+  ]).toBeLogged();
+
+  promC.resolve();
+  await nextTick();
+  expect([
+    "C:willRender",
+    "C:rendered",
+    "D:willRender",
+    "D:rendered",
+    "D:willPatch",
+    "D:patched",
+    "A:willPatch",
+    "B:willPatch",
+    "C:willPatch",
+    "C:patched",
+    "B:patched",
+    "A:patched",
+  ]).toBeLogged();
+  expect(fixture.innerHTML).toBe("<button>2</button><p>39</p>");
+});
+
+test("delayed rendering, reusing fiber and stuff", async () => {
+  let prom1 = makeDeferred();
+  let prom2 = makeDeferred();
+
+  class C extends Component {
+    static template = xml`<button t-on-click="increment"><t t-esc="state.val"/></button>`;
+    state = useState({ val: 1 });
+    setup() {
+      useLogLifecycle();
+    }
+    increment() {
+      this.state.val++;
+    }
+  }
+
+  class B extends Component {
+    static template = xml`<t t-esc="props.value"/><C />`;
+    static components = { C };
+    setup() {
+      useLogLifecycle();
+      let flag = false;
+      onWillUpdateProps(() => {
+        flag = true;
+        return prom1;
+      });
+      onRendered(async () => {
+        if (flag) {
+          await nextMicroTick();
+          prom2.resolve();
+        }
+      });
+    }
+  }
+
+  class A extends Component {
+    static template = xml`<B value="state.value"/>`;
+    static components = { B };
+    state = useState({ value: 33 });
+    setup() {
+      useLogLifecycle();
+    }
+  }
+
+  const parent = await mount(A, fixture);
+  expect(fixture.innerHTML).toBe("33<button>1</button>");
+  expect([
+    "A:setup",
+    "A:willStart",
+    "A:willRender",
+    "B:setup",
+    "B:willStart",
+    "A:rendered",
+    "B:willRender",
+    "C:setup",
+    "C:willStart",
+    "B:rendered",
+    "C:willRender",
+    "C:rendered",
+    "C:mounted",
+    "B:mounted",
+    "A:mounted",
+  ]).toBeLogged();
+
+  // initiate a render in A, but is blocked in B
+  parent.state.value = 34;
+  await nextTick();
+  expect(["A:willRender", "B:willUpdateProps", "A:rendered"]).toBeLogged();
+
+  // initiate a render in C => delayed because of render in A
+  fixture.querySelector("button")!.click();
+  await nextTick();
+  expect([]).toBeLogged();
+
+  // wait for render in A to be completed
+  prom1.resolve();
+  await prom2;
+  expect(["B:willRender", "B:rendered", "C:willRender", "C:rendered"]).toBeLogged();
+
+  // initiate a new render in A => fiber will be reused
+  parent.state.value = 355;
+  await nextTick();
+  expect(fixture.innerHTML).toBe("355<button>2</button>");
+  expect([
+    "A:willRender",
+    "B:willUpdateProps",
+    "A:rendered",
+    "B:willRender",
+    "B:rendered",
+    "A:willPatch",
+    "B:willPatch",
+    "B:patched",
+    "A:patched",
+    "C:willPatch",
+    "C:patched",
+  ]).toBeLogged();
+});
+
+test("delayed rendering, then component is destroyed and  stuff", async () => {
+  let prom1 = makeDeferred();
+
+  class C extends Component {
+    static template = xml`<button t-on-click="increment"><t t-esc="state.val"/></button>`;
+    state = useState({ val: 1 });
+    setup() {
+      useLogLifecycle();
+    }
+    increment() {
+      this.state.val++;
+    }
+  }
+
+  class B extends Component {
+    static template = xml`<t t-esc="props.value"/><t t-if="props.value lt 10"><C /></t>`;
+    static components = { C };
+    setup() {
+      useLogLifecycle();
+      onWillUpdateProps(() => prom1);
+    }
+  }
+
+  class A extends Component {
+    static template = xml`<B value="state.value"/>`;
+    static components = { B };
+    state = useState({ value: 3 });
+    setup() {
+      useLogLifecycle();
+    }
+  }
+
+  const parent = await mount(A, fixture);
+  expect(fixture.innerHTML).toBe("3<button>1</button>");
+  expect([
+    "A:setup",
+    "A:willStart",
+    "A:willRender",
+    "B:setup",
+    "B:willStart",
+    "A:rendered",
+    "B:willRender",
+    "C:setup",
+    "C:willStart",
+    "B:rendered",
+    "C:willRender",
+    "C:rendered",
+    "C:mounted",
+    "B:mounted",
+    "A:mounted",
+  ]).toBeLogged();
+
+  // initiate a render in C (so will be first task)
+  fixture.querySelector("button")!.click();
+  // initiate a render in A, but is blocked in B. the render will destroy c. also,
+  // it blocks the render C
+  parent.state.value = 34;
+  await nextTick();
+  expect(["A:willRender", "B:willUpdateProps", "A:rendered"]).toBeLogged();
+
+  // wait for render in A to be completed
+  prom1.resolve();
+  await nextTick();
+  expect(fixture.innerHTML).toBe("34");
+  expect([
+    "B:willRender",
+    "B:rendered",
+    "A:willPatch",
+    "B:willPatch",
+    "C:willUnmount",
+    "C:willDestroy",
+    "B:patched",
+    "A:patched",
+  ]).toBeLogged();
+
+  await nextTick();
+});
+
+test("delayed rendering, reusing fiber then component is destroyed and  stuff", async () => {
+  let prom1 = makeDeferred();
+
+  class C extends Component {
+    static template = xml`<button t-on-click="increment"><t t-esc="state.val"/></button>`;
+    state = useState({ val: 1 });
+    setup() {
+      useLogLifecycle();
+    }
+    increment() {
+      this.state.val++;
+    }
+  }
+
+  class B extends Component {
+    static template = xml`<t t-esc="props.value"/><C />`;
+    static components = { C };
+    setup() {
+      useLogLifecycle();
+      onWillUpdateProps(() => prom1);
+    }
+  }
+
+  class A extends Component {
+    static template = xml`A<t t-if="state.value lt 15"><B value="state.value"/></t>`;
+    static components = { B };
+    state = useState({ value: 3 });
+    setup() {
+      useLogLifecycle();
+    }
+  }
+
+  const parent = await mount(A, fixture);
+  expect(fixture.innerHTML).toBe("A3<button>1</button>");
+  expect([
+    "A:setup",
+    "A:willStart",
+    "A:willRender",
+    "B:setup",
+    "B:willStart",
+    "A:rendered",
+    "B:willRender",
+    "C:setup",
+    "C:willStart",
+    "B:rendered",
+    "C:willRender",
+    "C:rendered",
+    "C:mounted",
+    "B:mounted",
+    "A:mounted",
+  ]).toBeLogged();
+
+  // initiate a render in A, but is blocked in B
+  parent.state.value = 5;
+  await nextTick();
+  expect(["A:willRender", "B:willUpdateProps", "A:rendered"]).toBeLogged();
+
+  // initiate a render in C (will be delayed because of render in A)
+  fixture.querySelector("button")!.click();
+  await nextTick();
+  expect([]).toBeLogged();
+
+  // initiate a render in A, that will destroy B
+  parent.state.value = 23;
+  await nextTick();
+  expect(fixture.innerHTML).toBe("A");
+  expect([
+    "A:willRender",
+    "A:rendered",
+    "A:willPatch",
+    "B:willUnmount",
+    "C:willUnmount",
+    "C:willDestroy",
+    "B:willDestroy",
+    "A:patched",
+  ]).toBeLogged();
+});
+
 //   test.skip("components with shouldUpdate=false", async () => {
 //     const state = { p: 1, cc: 10 };
 

tests/components/hooks.test.ts

@@ -632,5 +632,35 @@ describe("hooks", () => {
         "cleaning up for 1",
       ]);
     });
+
+    test("properly behaves when the effect function throws", async () => {
+      let originalconsoleError = console.error;
+      let originalconsoleWarn = console.warn;
+      console.error = jest.fn(() => {});
+      console.warn = jest.fn(() => {});
+      class MyComponent extends Component {
+        static template = xml`<div/>`;
+        setup() {
+          useEffect(
+            () => {
+              throw new Error("Intentional error");
+            },
+            () => []
+          );
+        }
+      }
+
+      try {
+        await mount(MyComponent, fixture);
+      } catch (e: any) {
+        expect(e.message).toBe("Intentional error");
+      }
+      // no console.error because the error has been caught in this test
+      expect(console.error).toHaveBeenCalledTimes(0);
+      console.error = originalconsoleError;
+      // 1 console.warn because app is destroyed
+      expect(console.warn).toHaveBeenCalledTimes(1);
+      console.warn = originalconsoleWarn;
+    });
   });
 });

tests/components/lifecycle.test.ts

@@ -14,6 +14,7 @@ import {
   logStep,
   makeDeferred,
   makeTestFixture,
+  nextMicroTick,
   nextTick,
   snapshotEverything,
   useLogLifecycle,
@@ -104,6 +105,83 @@ describe("lifecycle hooks", () => {
     await mount(Test, fixture);
   });
 
+  test("timeout in onWillStart emits a warning", async () => {
+    const { warn } = console;
+    let warnArgs: any[];
+    console.warn = jest.fn((...args) => (warnArgs = args));
+    const { setTimeout } = window;
+    let timeoutCbs: any = {};
+    let timeoutId = 0;
+    window.setTimeout = ((cb: any) => {
+      timeoutCbs[++timeoutId] = cb;
+      return timeoutId;
+    }) as any;
+    class Test extends Component {
+      static template = xml`<span/>`;
+      setup() {
+        onWillStart(() => new Promise(() => {}));
+      }
+    }
+    mount(Test, fixture, { test: true });
+    nextTick();
+    for (const id in timeoutCbs) {
+      timeoutCbs[id]();
+      delete timeoutCbs[id];
+    }
+    await nextMicroTick();
+    await nextMicroTick();
+    expect(console.warn).toHaveBeenCalledTimes(1);
+    expect(warnArgs![0]!.message).toBe("onWillStart's promise hasn't resolved after 3 seconds");
+    console.warn = warn;
+    window.setTimeout = setTimeout;
+  });
+
+  test("timeout in onWillUpdateProps emits a warning", async () => {
+    class Child extends Component {
+      static template = xml``;
+      setup() {
+        onWillUpdateProps(() => new Promise(() => {}));
+      }
+    }
+    class Parent extends Component {
+      static template = xml`<Child prop="state.prop"/>`;
+      static components = { Child };
+      state = useState({ prop: 1 });
+    }
+    const parent = await mount(Parent, fixture, { test: true });
+
+    const { warn } = console;
+    let warnArgs: any[];
+    console.warn = jest.fn((...args) => (warnArgs = args));
+    const { setTimeout } = window;
+    let timeoutCbs: any = {};
+    let timeoutId = 0;
+    window.setTimeout = ((cb: any) => {
+      timeoutCbs[++timeoutId] = cb;
+      return timeoutId;
+    }) as any;
+
+    parent.state.prop = 2;
+    let tick = nextTick();
+    for (const id in timeoutCbs) {
+      timeoutCbs[id]();
+      delete timeoutCbs[id];
+    }
+    await tick;
+    tick = nextTick();
+    for (const id in timeoutCbs) {
+      timeoutCbs[id]();
+      delete timeoutCbs[id];
+    }
+    await tick;
+    expect(console.warn).toHaveBeenCalledTimes(1);
+    expect(warnArgs![0]!.message).toBe(
+      "onWillUpdateProps's promise hasn't resolved after 3 seconds"
+    );
+    console.warn = warn;
+    window.setTimeout = setTimeout;
+  });
+
   test("mounted hook is called if mounted in DOM", async () => {
     let mounted = false;
     class Test extends Component {

tests/components/reactivity.test.ts

@@ -8,7 +8,7 @@ import {
   useState,
   xml,
 } from "../../src";
-import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
 
 let fixture: HTMLElement;
 
@@ -155,4 +155,48 @@ describe("reactivity in lifecycle", () => {
     expect(steps).toEqual([2]);
     expect(fixture.innerHTML).toBe("<div>2</div>");
   });
+
+  test("Child component doesn't render when state they depend on changes but their parent is about to unmount them", async () => {
+    class Child extends Component {
+      static template = xml`<t t-esc="props.state.content.a"/>`;
+      setup() {
+        useLogLifecycle();
+      }
+    }
+    class Parent extends Component {
+      static template = xml`<Child t-if="state.renderChild" state="state"/>`;
+      static components = { Child };
+      state: any = useState({ renderChild: true, content: { a: 2 } });
+      setup() {
+        useLogLifecycle();
+      }
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("2");
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
+
+    parent.state.content = null;
+    parent.state.renderChild = false;
+    await nextTick();
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Child:willUnmount",
+      "Child:willDestroy",
+      "Parent:patched",
+    ]).toBeLogged();
+  });
 });

tests/helpers.ts

@@ -49,7 +49,7 @@ export async function nextTick(): Promise<void> {
 
 interface Deferred extends Promise<any> {
   resolve(val?: any): void;
-  reject(): void;
+  reject(val?: any): void;
 }
 
 export function makeDeferred(): Deferred {

tests/reactivity.test.ts

@@ -208,6 +208,46 @@ describe("Reactivity", () => {
     expect(n).toBe(1); // two operations but only one notification
   });
 
+  test("batched: modifying the reactive in the callback doesn't break reactivity", async () => {
+    let n = 0;
+    let obj = { a: 1 };
+    const state = createReactive(
+      obj,
+      batched(() => {
+        state.a; // subscribe to a
+        state.a = 2;
+        n++;
+      })
+    );
+    expect(n).toBe(0);
+    state.a = 2;
+    expect(n).toBe(0);
+    await nextMicroTick();
+    expect(n).toBe(0); // key has not be read yet
+    state.a = state.a + 5; // key is read and then modified
+    expect(n).toBe(0);
+    await nextMicroTick();
+    expect(n).toBe(1);
+    // the write a = 2 inside the batched callback triggered another notification, wait for it
+    await nextMicroTick();
+    expect(n).toBe(2);
+    // Should now be stable as we're writing the same value again
+    await nextMicroTick();
+    expect(n).toBe(2);
+
+    // Do it again to check it's not broken
+    state.a = state.a + 5; // key is read and then modified
+    expect(n).toBe(2);
+    await nextMicroTick();
+    expect(n).toBe(3);
+    // the write a = 2 inside the batched callback triggered another notification, wait for it
+    await nextMicroTick();
+    expect(n).toBe(4);
+    // Should now be stable as we're writing the same value again
+    await nextMicroTick();
+    expect(n).toBe(4);
+  });
+
   test("setting property to same value does not trigger callback", async () => {
     let n = 0;
     const state = createReactive({ a: 1 }, () => n++);
@@ -1095,6 +1135,13 @@ describe("Reactivity", () => {
     expect(n).toBe(1);
     expect(state.k).toEqual({ n: 2 });
   });
+
+  test("can access properties on reactive of frozen objects", async () => {
+    const obj = Object.freeze({ a: {} });
+    const state = createReactive(obj);
+    expect(() => state.a).not.toThrow();
+    expect(state.a).toBe(obj.a);
+  });
 });
 
 describe("Collections", () => {
@@ -1245,6 +1292,33 @@ describe("Collections", () => {
       reactiveObj.a = 1; // setting same value again shouldn't notify
       expect(observer).toHaveBeenCalledTimes(1);
     });
+
+    test("iterating with forEach returns reactives", async () => {
+      const keyObj = { a: 2 };
+      const thisArg = {};
+      const observer = jest.fn();
+      const state = reactive(new Set([keyObj]), observer);
+      let reactiveKeyObj: any, reactiveValObj: any, thisObj: any, mapObj: any;
+      state.forEach(function (this: any, val, key, map) {
+        [reactiveValObj, reactiveKeyObj, mapObj, thisObj] = [val, key, map, this];
+      }, thisArg);
+      expect(reactiveKeyObj).not.toBe(keyObj);
+      expect(reactiveValObj).not.toBe(keyObj);
+      expect(mapObj).toBe(state); // third argument should be the reactive
+      expect(thisObj).toBe(thisArg); // thisArg should not be made reactive
+      expect(toRaw(reactiveKeyObj as any)).toBe(keyObj);
+      expect(toRaw(reactiveValObj as any)).toBe(keyObj);
+      expect(reactiveKeyObj).toBe(reactiveValObj); // reactiveKeyObj and reactiveValObj should be the same object
+      reactiveKeyObj!.a = 0;
+      reactiveValObj!.a = 0;
+      expect(observer).toHaveBeenCalledTimes(0);
+      reactiveKeyObj!.a; // observe key "a" in key sub-reactive;
+      reactiveKeyObj!.a = 1;
+      expect(observer).toHaveBeenCalledTimes(1);
+      reactiveKeyObj!.a = 1; // setting same value again shouldn't notify
+      reactiveValObj!.a = 1;
+      expect(observer).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe("WeakSet", () => {
@@ -1467,6 +1541,36 @@ describe("Collections", () => {
       reactiveValObj.a = 1;
       expect(observer).toHaveBeenCalledTimes(2);
     });
+
+    test("iterating with forEach returns reactives", async () => {
+      const keyObj = { a: 2 };
+      const valObj = { a: 2 };
+      const thisArg = {};
+      const observer = jest.fn();
+      const state = reactive(new Map([[keyObj, valObj]]), observer);
+      let reactiveKeyObj: any, reactiveValObj: any, thisObj: any, mapObj: any;
+      state.forEach(function (this: any, val, key, map) {
+        [reactiveValObj, reactiveKeyObj, mapObj, thisObj] = [val, key, map, this];
+      }, thisArg);
+      expect(reactiveKeyObj).not.toBe(keyObj);
+      expect(reactiveValObj).not.toBe(valObj);
+      expect(mapObj).toBe(state); // third argument should be the reactive
+      expect(thisObj).toBe(thisArg); // thisArg should not be made reactive
+      expect(toRaw(reactiveKeyObj as any)).toBe(keyObj);
+      expect(toRaw(reactiveValObj as any)).toBe(valObj);
+      reactiveKeyObj!.a = 0;
+      reactiveValObj!.a = 0;
+      expect(observer).toHaveBeenCalledTimes(0);
+      reactiveKeyObj!.a; // observe key "a" in key sub-reactive;
+      reactiveKeyObj!.a = 1;
+      expect(observer).toHaveBeenCalledTimes(1);
+      reactiveValObj!.a; // observe key "a" in val sub-reactive;
+      reactiveValObj!.a = 1;
+      expect(observer).toHaveBeenCalledTimes(2);
+      reactiveKeyObj!.a = 1; // setting same value again shouldn't notify
+      reactiveValObj!.a = 1;
+      expect(observer).toHaveBeenCalledTimes(2);
+    });
   });
 
   describe("WeakMap", () => {

tests/utils.test.ts

@@ -50,4 +50,24 @@ describe("batched", () => {
     await nextMicroTick();
     expect(n).toBe(1);
   });
+
+  test("calling batched function from within the callback is not treated as part of the original batch", async () => {
+    let n = 0;
+    let fn = batched(() => {
+      n++;
+      if (n === 1) {
+        fn();
+      }
+    });
+
+    expect(n).toBe(0);
+    fn();
+    expect(n).toBe(0);
+    await nextMicroTick(); // First batch
+    expect(n).toBe(1);
+    await nextMicroTick(); // Second batch initiated from within the callback
+    expect(n).toBe(2);
+    await nextMicroTick();
+    expect(n).toBe(2);
+  });
 });