batch for more efficient message processing

Summary: `unstablebatched_updates` should be used whenever a non-react originating event might affect multiple components, to make sure that React batches them optimally. Applied it to the most import events that handle incoming device events

Reviewed By: nikoant

Differential Revision: D25052937

fbshipit-source-id: b2c783fb9c43be371553db39969280f9d7c3e260

desktop/app/src/Client.tsx

@@ -391,6 +391,7 @@ export default class Client extends EventEmitter {
       return;
     }
 
+    batch(() => {
       let rawData;
       try {
         rawData = JSON.parse(msg);
@@ -496,6 +497,7 @@ export default class Client extends EventEmitter {
         this.finishTimingRequestResponse(callbacks.metadata);
         this.onResponse(data, callbacks.resolve, callbacks.reject);
       }
+    });
   }
 
   onResponse(

desktop/app/src/utils/messageQueue.tsx

@@ -24,7 +24,7 @@ import {Idler, BaseIdler} from './Idler';
 import {pluginIsStarred, getSelectedPluginKey} from '../reducers/connections';
 import {deconstructPluginKey} from './clientUtils';
 import {defaultEnabledBackgroundPlugins} from './pluginUtils';
-import {_SandyPluginInstance} from 'flipper-plugin';
+import {batch, _SandyPluginInstance} from 'flipper-plugin';
 import {addBackgroundStat} from './pluginStats';
 
 function processMessageClassic(
@@ -187,6 +187,7 @@ export async function processMessageQueue(
       : getCurrentPluginState(store, plugin, pluginKey);
     let offset = 0;
     let newPluginState = persistedState;
+    batch(() => {
       do {
         if (_SandyPluginInstance.is(plugin)) {
           // Optimization: we could send a batch of messages here
@@ -212,7 +213,10 @@ export async function processMessageQueue(
       // resistent to kicking off this process twice; grabbing, processing messages, saving state is done synchronosly
       // until the idler has to break
       store.dispatch(clearMessageQueue(pluginKey, offset));
-    if (!_SandyPluginInstance.is(plugin) && newPluginState !== persistedState) {
+      if (
+        !_SandyPluginInstance.is(plugin) &&
+        newPluginState !== persistedState
+      ) {
         store.dispatch(
           setPluginState({
             pluginKey,
@@ -220,6 +224,7 @@ export async function processMessageQueue(
           }),
         );
       }
+    });
 
     if (idler.isCancelled()) {
       return false;

desktop/flipper-plugin/src/__tests__/api.node.tsx

@@ -29,6 +29,7 @@ test('Correct top level API exposed', () => {
       "Layout",
       "NUX",
       "TestUtils",
+      "batch",
       "createState",
       "renderReactRoot",
       "theme",

desktop/flipper-plugin/src/index.ts

@@ -30,6 +30,7 @@ export {
   usePlugin,
 } from './plugin/PluginContext';
 export {createState, useValue, Atom} from './state/atom';
+export {batch} from './state/batch';
 export {FlipperLib} from './plugin/FlipperLib';
 export {
   MenuEntry,

desktop/flipper-plugin/src/plugin/Plugin.tsx

@@ -11,6 +11,7 @@ import {SandyPluginDefinition} from './SandyPluginDefinition';
 import {BasePluginInstance, BasePluginClient} from './PluginBase';
 import {FlipperLib} from './FlipperLib';
 import {RealFlipperDevice} from './DevicePlugin';
+import {batched} from '../state/batch';
 
 type EventsContract = Record<string, any>;
 type MethodsContract = Record<string, (params: any) => Promise<any>>;
@@ -146,10 +147,10 @@ export class SandyPluginInstance extends BasePluginInstance {
         return realClient.query.app;
       },
       onConnect: (cb) => {
-        this.events.on('connect', cb);
+        this.events.on('connect', batched(cb));
       },
       onDisconnect: (cb) => {
-        this.events.on('disconnect', cb);
+        this.events.on('disconnect', batched(cb));
       },
       send: async (method, params) => {
         this.assertConnected();
@@ -160,11 +161,11 @@ export class SandyPluginInstance extends BasePluginInstance {
           params as any,
         );
       },
-      onMessage: (event, callback) => {
+      onMessage: (event, cb) => {
-        this.events.on('event-' + event, callback);
+        this.events.on('event-' + event, batched(cb));
       },
-      onUnhandledMessage: (callback) => {
+      onUnhandledMessage: (cb) => {
-        this.events.on('unhandled-event', callback);
+        this.events.on('unhandled-event', batched(cb));
       },
       supportsMethod: async (method) => {
         this.assertConnected();

desktop/flipper-plugin/src/plugin/PluginBase.tsx

@@ -13,6 +13,7 @@ import {Atom} from '../state/atom';
 import {MenuEntry, NormalizedMenuEntry, normalizeMenuEntry} from './MenuEntry';
 import {FlipperLib} from './FlipperLib';
 import {Device, RealFlipperDevice} from './DevicePlugin';
+import {batched} from '../state/batch';
 
 export interface BasePluginClient {
   readonly device: Device;
@@ -116,7 +117,7 @@ export abstract class BasePluginInstance {
     // To be called from constructory
     setCurrentPluginInstance(this);
     try {
-      this.instanceApi = factory();
+      this.instanceApi = batched(factory)();
     } finally {
       this.initialStates = undefined;
       setCurrentPluginInstance(undefined);
@@ -127,16 +128,16 @@ export abstract class BasePluginInstance {
     return {
       device: this.device,
       onActivate: (cb) => {
-        this.events.on('activate', cb);
+        this.events.on('activate', batched(cb));
       },
       onDeactivate: (cb) => {
-        this.events.on('deactivate', cb);
+        this.events.on('deactivate', batched(cb));
       },
-      onDeepLink: (callback) => {
+      onDeepLink: (cb) => {
-        this.events.on('deeplink', callback);
+        this.events.on('deeplink', batched(cb));
       },
       onDestroy: (cb) => {
-        this.events.on('destroy', cb);
+        this.events.on('destroy', batched(cb));
       },
       addMenuEntry: (...entries) => {
         for (const entry of entries) {

desktop/flipper-plugin/src/state/batch.tsx

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {unstable_batchedUpdates} from 'react-dom';
+
+export const batch = unstable_batchedUpdates;
+
+export function batched<T extends Function>(fn: T): T;
+export function batched(fn: any) {
+  return function (this: any) {
+    let res: any;
+    batch(() => {
+      // eslint-disable-next-line
+      res = fn.apply(this, arguments);
+    });
+    return res;
+  };
+}