adding table debouncing

Summary:
When changing the props of a table often, this might results in a lot of unnecessary rerenders. This could be mostly seen in the analytics plugin, which is sending a lot of messages in a short time.

The update of the table component is now debounced to only re-render every 150ms. This also affects searching and filtering and makes typing in the search input smoother.

Reviewed By: passy

Differential Revision: D9447722

fbshipit-source-id: 00e092e4e047e9c40e5a1ec2789644858acc18dd

flow-typed/npm/lodash.debounce_vx.x.x.js

@@ -0,0 +1,33 @@
+// flow-typed signature: 95241cb8305cb4cbda994a489dff963f
+// flow-typed version: <<STUB>>/lodash.debounce_v4.0.8/flow_v0.76.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'lodash.debounce'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'lodash.debounce' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+
+
+// Filename aliases
+declare module 'lodash.debounce/index' {
+  declare module.exports: $Exports<'lodash.debounce'>;
+}
+declare module 'lodash.debounce/index.js' {
+  declare module.exports: $Exports<'lodash.debounce'>;
+}

flow-typed/npm/react-debounce-render_vx.x.x.js

@@ -0,0 +1,32 @@
+// flow-typed signature: 8416c078446255c2792e5980fa4c381c
+// flow-typed version: <<STUB>>/react-debounce-render_v4.0.3/flow_v0.76.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'react-debounce-render'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'react-debounce-render' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'react-debounce-render/lib/index' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'react-debounce-render/lib/index.js' {
+  declare module.exports: $Exports<'react-debounce-render/lib/index'>;
+}

package.json

@@ -53,12 +53,14 @@
     "fs-extra": "^5.0.0",
     "invariant": "^2.2.2",
     "jest": "^22.2.1",
+    "lodash.debounce": "^4.0.8",
     "mkdirp": "^0.5.1",
     "needle": "2.1.1",
     "openssl-wrapper": "^0.3.4",
     "prop-types": "^15.6.0",
     "react": "16",
     "react-color": "^2.11.7",
+    "react-debounce-render": "^4.0.3",
     "react-devtools-core": "3.1.0",
     "react-dom": "16",
     "react-redux": "^5.0.7",

src/ui/components/console.js

@@ -81,9 +81,6 @@ export class Console extends Component<Props, State> {
     },
   };
 
-  static CommandsTable = ManagedTable.extends({
-    flexGrow: 1,
-  });
   static Window = FlexColumn.extends({
     padding: '15px',
     flexGrow: 1,
@@ -184,7 +181,7 @@ export class Console extends Component<Props, State> {
       )
       .reduce((x, y) => x.concat(y), []);
     return rows.length ? (
-      <Console.CommandsTable
+      <ManagedTable
         columns={Console.TableColumns}
         rows={rows}
         multiline={true}

src/ui/components/filter/FilterRow.js

@@ -79,7 +79,7 @@ export default class FilterRow extends PureComponent<Props> {
       <ContextMenu
         items={this.menuItems}
         component={FilterText}
-        onClick={this.onClick}
+        onMouseDown={this.onClick}
         {...props}>
         {children}
       </ContextMenu>

src/ui/components/table/ManagedTable.js

@@ -26,6 +26,8 @@ import TableRow from './TableRow.js';
 import ContextMenu from '../ContextMenu.js';
 import FlexColumn from '../FlexColumn.js';
 import createPaste from '../../../utils/createPaste.js';
+import debounceRender from 'react-debounce-render';
+import debounce from 'lodash.debounce';
 import {DEFAULT_ROW_HEIGHT} from './types';
 
 export type ManagedTableProps = {|
@@ -121,7 +123,7 @@ type ManagedTableState = {|
  * If you require lower level access to the state then use [`<Table>`]()
  * directly.
  */
-export default class ManagedTable extends styled.StylableComponent<
+class ManagedTable extends styled.StylableComponent<
   ManagedTableProps,
   ManagedTableState,
 > {
@@ -396,34 +398,37 @@ export default class ManagedTable extends styled.StylableComponent<
       .join('\n');
   };
 
-  onScroll = ({
+  onScroll = debounce(
-    scrollDirection,
+    ({
-    scrollOffset,
+      scrollDirection,
-  }: {
+      scrollOffset,
-    scrollDirection: 'forward' | 'backward',
+    }: {
-    scrollOffset: number,
+      scrollDirection: 'forward' | 'backward',
-    scrollUpdateWasRequested: boolean,
+      scrollOffset: number,
-  }) => {
+      scrollUpdateWasRequested: boolean,
-    const {current} = this.scrollRef;
+    }) => {
-    const parent = current ? current.parentElement : null;
+      const {current} = this.scrollRef;
-    if (
+      const parent = current ? current.parentElement : null;
-      this.props.stickyBottom &&
+      if (
-      scrollDirection === 'forward' &&
+        this.props.stickyBottom &&
-      !this.state.shouldScrollToBottom &&
+        scrollDirection === 'forward' &&
-      current &&
+        !this.state.shouldScrollToBottom &&
-      parent instanceof HTMLElement &&
+        current &&
-      current.offsetHeight - (scrollOffset + parent.offsetHeight) <
+        parent instanceof HTMLElement &&
-        parent.offsetHeight
+        current.offsetHeight - (scrollOffset + parent.offsetHeight) <
-    ) {
+          parent.offsetHeight
-      this.setState({shouldScrollToBottom: true});
+      ) {
-    } else if (
+        this.setState({shouldScrollToBottom: true});
-      this.props.stickyBottom &&
+      } else if (
-      scrollDirection === 'backward' &&
+        this.props.stickyBottom &&
-      this.state.shouldScrollToBottom
+        scrollDirection === 'backward' &&
-    ) {
+        this.state.shouldScrollToBottom
-      this.setState({shouldScrollToBottom: false});
+      ) {
-    }
+        this.setState({shouldScrollToBottom: false});
-  };
+      }
+    },
+    100,
+  );
 
   render() {
     const {
@@ -459,7 +464,7 @@ export default class ManagedTable extends styled.StylableComponent<
             {({width, height}) => (
               <ContextMenu buildItems={this.buildContextMenuItems}>
                 <List
-                  itemCount={this.props.rows.length}
+                  itemCount={rows.length}
                   itemSize={index =>
                     (rows[index] && rows[index].height) ||
                     rowLineHeight ||
@@ -474,6 +479,7 @@ export default class ManagedTable extends styled.StylableComponent<
                   height={height}>
                   {({index, style}) => (
                     <TableRow
+                      key={rows[index].key}
                       columnSizes={columnSizes}
                       columnKeys={columnKeys}
                       onMouseDown={e => this.onHighlight(e, rows[index], index)}
@@ -499,3 +505,5 @@ export default class ManagedTable extends styled.StylableComponent<
     );
   }
 }
+
+export default debounceRender(ManagedTable, 150, {maxTime: 200});

yarn.lock

@@ -3214,6 +3214,10 @@ lodash.clonedeep@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+
 lodash.forin@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.forin/-/lodash.forin-4.4.0.tgz#5d3f20ae564011fbe88381f7d98949c9c9519731"
@@ -4031,6 +4035,13 @@ react-color@^2.11.7:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
+react-debounce-render@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/react-debounce-render/-/react-debounce-render-4.0.3.tgz#ce58026578d73b81f1f990d7c4bfd3fa038b5620"
+  dependencies:
+    lodash "^4.17.10"
+    lodash.debounce "^4.0.8"
+
 react-devtools-core@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-3.1.0.tgz#eec2e9e0e6edb77772e2bfc7d286a296f55a261a"