feat(runtime): skip initial task queue to improve first time rendering (#6331)

* fix(runtime): skip task schedule for inital render phase

* fix: use microtask to queue initial dispatch

* test: added update-component tests to verify call order

---------

Co-authored-by: Christian Bromann <[email protected]>

Author: danielleroux

src/runtime/test/update-component.spec.tsx

@@ -0,0 +1,72 @@
+import { Component, h, State } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+
+describe('update-component', () => {
+  describe('scheduleUpdate - initial load with queueMicrotask', () => {
+    @Component({
+      tag: 'test-cmp',
+    })
+    class TestCmp {
+      @State() count = 0;
+
+      render() {
+        return h('div', null, `Count: ${this.count}`);
+      }
+    }
+
+    it('should use queueMicrotask for initial load dispatch', async () => {
+      const queueMicrotaskSpy = jest.spyOn(global, 'queueMicrotask');
+
+      const page = await newSpecPage({
+        components: [TestCmp],
+        html: `<test-cmp></test-cmp>`,
+      });
+
+      expect(queueMicrotaskSpy).toHaveBeenCalled();
+      expect(page.root.textContent).toContain('Count: 0');
+
+      queueMicrotaskSpy.mockRestore();
+    });
+
+    it('should not interfere with following render dispatch events', async () => {
+      let componentWillRender = 0;
+      const queueMicrotaskSpy = jest.spyOn(global, 'queueMicrotask');
+
+      @Component({
+        tag: 'update-test-cmp',
+      })
+      class UpdateTestCmp {
+        @State() count = 0;
+
+        increment() {
+          this.count++;
+        }
+
+        componentWillRender() {
+          componentWillRender++;
+        }
+
+        render() {
+          return h('div', null, `Count: ${this.count}`);
+        }
+      }
+
+      const page = await newSpecPage({
+        components: [UpdateTestCmp],
+        html: `<update-test-cmp></update-test-cmp>`,
+      });
+
+      expect(page.root.textContent).toBe('Count: 0');
+      expect(componentWillRender).toBe(1);
+
+      page.rootInstance.increment();
+      await page.waitForChanges();
+
+      expect(page.root.textContent).toContain('Count: 1');
+      expect(queueMicrotaskSpy).toHaveBeenCalledTimes(1);
+      expect(componentWillRender).toBe(2);
+
+      queueMicrotaskSpy.mockRestore();
+    });
+  });
+});

src/runtime/update-component.ts

@@ -23,7 +23,7 @@ export const attachToAncestor = (hostRef: d.HostRef, ancestorComponent?: d.HostE
   }
 };
 
-export const scheduleUpdate = (hostRef: d.HostRef, isInitialLoad: boolean) => {
+export const scheduleUpdate = (hostRef: d.HostRef, isInitialLoad: boolean): Promise<void> | void => {
   if (BUILD.taskQueue && BUILD.updatable) {
     hostRef.$flags$ |= HOST_FLAGS.isQueuedForUpdate;
   }
@@ -37,6 +37,14 @@ export const scheduleUpdate = (hostRef: d.HostRef, isInitialLoad: boolean) => {
   // has already fired off its lifecycle update then
   // fire off the initial update
   const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
+
+  if (isInitialLoad) {
+    queueMicrotask(() => {
+      dispatch();
+    });
+    return;
+  }
+
   return BUILD.taskQueue ? writeTask(dispatch) : dispatch();
 };