[IMP] component: only useState on props that are already reactive

Previously, components would automatically call useState on their props,
so that changes deeply within props would automatically cause the
component to be rendered. This can be useful when passing a piece of
state to children or descendants.

One problem with this is that all props implicitly become reactive, even
if the object that was passed as a props was not. The problem with that
being that since the original object is not reactive, any change made by
the parent will not go through the reactivity system and the children
won't be notified of the change, in essence, this reactive object is
essentially useless, while having a real cost: traversing reactive
objects creates more reactive objects, and those objects are all
proxies. This is expensive for basically no benefit, while also making
it more difficult to debug code that involves those objects.

This commit fixes that by only calling useState on objects that are
already reactive, allowing the usecase described in the first paragraph
without the drawbacks described in the second.

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

@@ -26,6 +26,30 @@ exports[`reactivity in lifecycle Child component doesn't render when state they
 }"
 `;
 
+exports[`reactivity in lifecycle Component is automatically subscribed to reactive object received as prop 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {obj: ctx['obj'], reactiveObj: ctx['reactiveObj']}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`reactivity in lifecycle Component is automatically subscribed to reactive object received as prop 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'].obj.a);
+    const b3 = text(ctx['props'].reactiveObj.b);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
 exports[`reactivity in lifecycle can use a state hook 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/components/reactivity.test.ts

@@ -199,4 +199,36 @@ describe("reactivity in lifecycle", () => {
       "Parent:patched",
     ]).toBeLogged();
   });
+
+  test("Component is automatically subscribed to reactive object received as prop", async () => {
+    let childRenderCount = 0;
+    let parentRenderCount = 0;
+    class Child extends Component {
+      static template = xml`<t t-esc="props.obj.a"/><t t-esc="props.reactiveObj.b"/>`;
+      setup() {
+        onWillRender(() => childRenderCount++);
+      }
+    }
+    class Parent extends Component {
+      static template = xml`<Child obj="obj" reactiveObj="reactiveObj"/>`;
+      static components = { Child };
+      obj = { a: 1 };
+      reactiveObj = useState({ b: 2 });
+      setup() {
+        onWillRender(() => parentRenderCount++);
+      }
+    }
+    const comp = await mount(Parent, fixture);
+    expect([parentRenderCount, childRenderCount]).toEqual([1, 1]);
+    expect(fixture.innerHTML).toBe("12");
+    comp.obj.a = 3; // non reactive object, shouldn't cause render
+    await nextTick();
+    expect([parentRenderCount, childRenderCount]).toEqual([1, 1]);
+    expect(fixture.innerHTML).toBe("12");
+    comp.reactiveObj.b = 4;
+    await nextTick();
+    // Only child should be rendered: the parent never read the b key in reactiveObj
+    expect([parentRenderCount, childRenderCount]).toEqual([1, 2]);
+    expect(fixture.innerHTML).toBe("34");
+  });
 });