diff --git a/CHANGELOG.md b/CHANGELOG.md
index de3e8b4..e93aca5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.16.0-beta.3
+
+Change hook order.
+
 ## 0.16.0-beta.2
 
 - Add Brotli size.
diff --git a/examples/integrate/ui.ts b/examples/integrate/ui.ts
index d0ccbdc..154dc2e 100644
--- a/examples/integrate/ui.ts
+++ b/examples/integrate/ui.ts
@@ -9,12 +9,10 @@ declare global {
 function render() {
   window.CUSTOM_SIDE_BAR = true
   window.addEventListener('client:ready', () => {
-    setTimeout(() => {
-      const evt = new CustomEvent('send:ui', { detail: { Component: SideBar, type: 'SideBar' } })
-      window.dispatchEvent(evt)
-      const evt2 = new CustomEvent('send:ui', { detail: { Component: Main, type: 'Main' } })
-      window.dispatchEvent(evt2)
-    }, 300)
+    const evt = new CustomEvent('send:ui', { detail: { Component: SideBar, type: 'SideBar' } })
+    window.dispatchEvent(evt)
+    const evt2 = new CustomEvent('send:ui', { detail: { Component: Main, type: 'Main' } })
+    window.dispatchEvent(evt2)
   })
 }
 
diff --git a/package.json b/package.json
index 86fe219..567aea8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite-bundle-analyzer",
-  "version": "0.16.0-beta.2",
+  "version": "0.16.0-beta.3",
   "description": "a modern vite bundle analyzer tool",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/src/client/receiver.tsx b/src/client/receiver.tsx
index ce70c97..0f139cf 100644
--- a/src/client/receiver.tsx
+++ b/src/client/receiver.tsx
@@ -7,8 +7,6 @@ export function Receiver() {
   const updateUI = useUpdateUI()
   const updateAnalyzeModule = useUpdateAnalyzeModule()
   useEffect(() => {
-    const evt = createMagicEvent('client:ready', {})
-    window.dispatchEvent(evt)
     const handler = (evt: CustomEvent<SendUIMessage>) => {
       if (evt.detail.Component) {
         updateUI(evt.detail.type, evt.detail.Component)
@@ -25,6 +23,9 @@ export function Receiver() {
     window.addEventListener('send:ui', handler)
     // @ts-expect-error custom-event
     window.addEventListener('send:filter', filterHandler)
+
+    const evt = createMagicEvent('client:ready', {})
+    window.dispatchEvent(evt)
     return () => {
       // @ts-expect-error custom-event
       window.removeEventListener('send:ui', handler)