diff --git a/src/component/component.ts b/src/component/component.ts
index 338b75d3..b7e68cda 100644
--- a/src/component/component.ts
+++ b/src/component/component.ts
@@ -373,6 +373,9 @@ export class Component<Props extends {} = any, T extends Env = Env> {
   async render(force: boolean = false): Promise<void> {
     const __owl__ = this.__owl__;
     const currentFiber = __owl__.currentFiber;
+    if (!__owl__.vnode && !currentFiber) {
+      return;
+    }
     if (currentFiber && !currentFiber.isRendered && !currentFiber.isCompleted) {
       return scheduler.addFiber(currentFiber.root);
     }
diff --git a/tests/component/un_mounting.test.ts b/tests/component/un_mounting.test.ts
index ed6b7481..da399a8d 100644
--- a/tests/component/un_mounting.test.ts
+++ b/tests/component/un_mounting.test.ts
@@ -338,6 +338,22 @@ describe("unmounting and remounting", () => {
     expect(detachedDiv.innerHTML).toBe("<div>2</div>");
   });
 
+  test("change state and render while not mounted ", async () => {
+    class App extends Component {
+      static template = xml`<div><t t-esc="state.val"/></div>`;
+      state = useState({ val: 1 });
+    }
+
+    const app = new App(null);
+
+    app.state.val = 2; // will call the render method (before being mounted)
+    await nextTick();
+
+    await app.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div>2</div>");
+  });
+
   test("destroy and change state after mounted in detached dom", async () => {
     class App extends Component {
       static template = xml`<div><t t-esc="state.val"/></div>`;