perf: throttle component update hook

Author: Akryum

packages/app-backend-core/src/index.ts

@@ -20,6 +20,7 @@ import {
   SharedData,
 } from '@vue-devtools/shared-utils'
 import debounce from 'lodash/debounce'
+import throttle from 'lodash/throttle'
 import { hook } from './global-hook'
 import { subscribe, unsubscribe, isSubscribed } from './util/subscriptions'
 import { highlight, unHighlight } from './highlighter'
@@ -110,7 +111,7 @@ async function connect () {
 
   // Components
 
-  hook.on(HookEvents.COMPONENT_UPDATED, async (app, uid, parentUid, component) => {
+  hook.on(HookEvents.COMPONENT_UPDATED, throttle(async (app, uid, parentUid, component) => {
     try {
       let id: string
       let appRecord: AppRecord
@@ -136,7 +137,7 @@ async function connect () {
         console.error(e)
       }
     }
-  })
+  }, 1000 / 10))
 
   hook.on(HookEvents.COMPONENT_ADDED, async (app, uid, parentUid, component) => {
     try {

packages/shell-dev-vue3/src/App.vue

@@ -60,6 +60,7 @@ export default {
     return {
       count: 0,
       text: 'Meow',
+      time: 0,
     }
   },
 
@@ -69,6 +70,17 @@ export default {
       app.use(SimplePlugin)
       app.mount('#nested-app')
     },
+
+    startTimer () {
+      this.stopTimer()
+      this.timer = setInterval(() => {
+        this.time++
+      }, 1)
+    },
+
+    stopTimer () {
+      clearInterval(this.timer)
+    },
   },
 }
 </script>
@@ -84,6 +96,16 @@ export default {
     <span>{{ text }}</span>
   </div>
 
+  <div>
+    <button @click="startTimer">
+      Start timer
+    </button>
+    <button @click="stopTimer">
+      Stop timer
+    </button>
+    <span>{{ time }}</span>
+  </div>
+
   <div>
     <Heavy
       v-for="i in count"