Debounce receiving messages

Summary:
See previous diff.

Achieves the same optimization as in the mentioned diff, but this time by only debouncing the messages as they arrive over the socket, and not the state updates caused by Redux directly. This means that plugin rendering won't be debounced anymore until we address this more fundamentally.

With this change there is a double level buffering:

1. A buffer that stores all incoming messages (that are not replies to requests)
2. A buffer that stores messages we are interested in in the plugin queue, unless the plugin is active (this we already had).

This still fixes the issue that too chatty plugins cause to many updates foreground plugin (the problem we tried to fix originally), without debouncing plugin rendering if it is needed to update for any other reason.

Another nice benefit is that previously every received message would trigger a store update in Redux which would cause all connected components to evaluate their subscriptions (and then bail out in the typical case). Now we will only update the redux store every 200 ms.

Changelog: Foreground plugins will burn less CPU when they're very chatty

Reviewed By: jknoxville

Differential Revision: D21858849

fbshipit-source-id: c72352e569a8a803bbedffb71b17b11fcefee043

desktop/app/src/Client.tsx

@@ -23,14 +23,15 @@ import {registerPlugins} from './reducers/plugins';
 import createTableNativePlugin from './plugins/TableNativePlugin';
 import {EventEmitter} from 'events';
 import invariant from 'invariant';
-import {flipperRecorderAddEvent} from './utils/pluginStateRecorder';
 import {
   getPluginKey,
   defaultEnabledBackgroundPlugins,
 } from './utils/pluginUtils';
-import {processMessageLater} from './utils/messageQueue';
+import {processMessagesLater} from './utils/messageQueue';
 import {sideEffect} from './utils/sideEffect';
 import {emitBytesReceived} from './dispatcher/tracking';
+import {debounce} from 'lodash';
+import {batch} from 'react-redux';
 
 type Plugins = Array<string>;
 
@@ -126,6 +127,13 @@ export default class Client extends EventEmitter {
   logger: Logger;
   lastSeenDeviceList: Array<BaseDevice>;
   broadcastCallbacks: Map<string, Map<string, Set<Function>>>;
+  messageBuffer: Record<
+    string /*pluginKey*/,
+    {
+      plugin: typeof FlipperPlugin | typeof FlipperDevicePlugin;
+      messages: Params[];
+    }
+  > = {};
 
   requestCallbacks: Map<
     number,
@@ -398,8 +406,15 @@ export default class Client extends EventEmitter {
             {serial: this.query.device_id},
             params.api,
           );
-          flipperRecorderAddEvent(pluginKey, params.method, params.params);
-          processMessageLater(this.store, pluginKey, persistingPlugin, params);
+          if (!this.messageBuffer[pluginKey]) {
+            this.messageBuffer[pluginKey] = {
+              plugin: persistingPlugin,
+              messages: [params],
+            };
+          } else {
+            this.messageBuffer[pluginKey].messages.push(params);
+          }
+          this.flushMessageBufferDebounced();
         }
         const apiCallbacks = this.broadcastCallbacks.get(params.api);
         if (!apiCallbacks) {
@@ -545,6 +560,26 @@ export default class Client extends EventEmitter {
     });
   }
 
+  flushMessageBuffer = () => {
+    // batch to make sure that Redux collapsed the dispatches
+    batch(() => {
+      for (const pluginKey in this.messageBuffer) {
+        processMessagesLater(
+          this.store,
+          pluginKey,
+          this.messageBuffer[pluginKey].plugin,
+          this.messageBuffer[pluginKey].messages,
+        );
+      }
+      this.messageBuffer = {};
+    });
+  };
+
+  flushMessageBufferDebounced = debounce(this.flushMessageBuffer, 200, {
+    leading: true,
+    trailing: true,
+  });
+
   startTimingRequestResponse(data: RequestMetadata) {
     performance.mark(this.getPerformanceMark(data));
   }