Performance optimizations

Summary:
This diff removes a bunch of performance bottlenecks of `DataInspector`, mostly by making sure that non new data structures are send to children during rendering. For example, before this diff, fields like `expanded`, `ancestry` and `path` would always be freshly constructed, resulting in new data structures send down, causing the full json tree to always re-render.

By migrating to hooks this became a lot easy to manage.

Also fixed some other minor component reuse issues

Fixed rendering of recursive trees which was broken in the past, and added regression test

Fixed issue with uppercase search string causing unnecessary re-filtering

Make sure changing expand / collapse resets the filter

Reviewed By: passy

Differential Revision: D21381647

fbshipit-source-id: 72834e15088432f55b4b9c88f182ffc9908d4e49

desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx

@@ -63,6 +63,7 @@ type ManagedDataInspectorState = {
 };
 
 const MAX_RESULTS = 50;
+const EMPTY_ARRAY: any[] = [];
 
 /**
  * Wrapper around `DataInspector` that handles expanded state.
@@ -88,7 +89,7 @@ export default class ManagedDataInspector extends PureComponent<
     nextProps: ManagedDataInspectorProps,
     currentState: ManagedDataInspectorState,
   ) {
-    if (nextProps.filter === currentState.filter) {
+    if (nextProps.filter?.toLowerCase() === currentState.filter) {
       return null;
     }
     if (!nextProps.filter) {
@@ -175,6 +176,9 @@ export default class ManagedDataInspector extends PureComponent<
           expandRoot={this.props.expandRoot}
           collapsed={this.props.filter ? true : this.props.collapsed}
           tooltips={this.props.tooltips}
+          parentPath={EMPTY_ARRAY}
+          depth={0}
+          parentAncestry={EMPTY_ARRAY}
         />
       </HighlightProvider>
     );