From 4f75247213614fec10680ee1925cac572153565b Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Thu, 15 Apr 2021 07:46:28 -0700
Subject: [PATCH] Make Sidebar Extensions more idiomatic

Summary: Sidebar extensions were unkeyed, which make them render inefficiently. I cleaned the api a bit here by making the extensions more idiomatic; they are now components rather then functions, so that they have their own render cycle, state, etc. They are memo-ed now as well, so that they don't have to re-render if the selected item doesn't change.

Reviewed By: nikoant

Differential Revision: D27685980

fbshipit-source-id: b133bc42061b3b8cf971792f5818810ecb80e3ea
---
 .../plugins/public/layout/InspectorSidebar.tsx  | 14 ++++++++++----
 .../{index.tsx => SidebarExtensions.tsx}        | 17 +++++++++--------
 2 files changed, 19 insertions(+), 12 deletions(-)
 rename desktop/plugins/public/layout/extensions/fb-stubs/{index.tsx => SidebarExtensions.tsx} (61%)

diff --git a/desktop/plugins/public/layout/InspectorSidebar.tsx b/desktop/plugins/public/layout/InspectorSidebar.tsx
index 8b7655156..a3a2ed1bb 100644
--- a/desktop/plugins/public/layout/InspectorSidebar.tsx
+++ b/desktop/plugins/public/layout/InspectorSidebar.tsx
@@ -23,7 +23,7 @@ import deepEqual from 'deep-equal';
 import React from 'react';
 import {useMemo, useEffect} from 'react';
 import {kebabCase} from 'lodash';
-import {default as SidebarExtensions} from './extensions/fb-stubs/index';
+import {SidebarExtensions} from './extensions/fb-stubs/SidebarExtensions';
 
 const NoData = styled(FlexCenter)({
   fontSize: 18,
@@ -147,9 +147,15 @@ const Sidebar: React.FC<Props> = (props: Props) => {
   const sections: Array<React.ReactNode> = (
     (SidebarExtensions &&
       element?.data &&
-      SidebarExtensions.map((ext) =>
-        ext(props.client, props.realClient, element, props.logger),
-      )) ||
+      Object.entries(SidebarExtensions).map(([ext, Comp]) => (
+        <Comp
+          key={ext}
+          client={props.client}
+          realClient={props.realClient}
+          logger={props.logger}
+          selectedNode={element}
+        />
+      ))) ||
     []
   ).concat(
     sectionDefs.map((def) => (
diff --git a/desktop/plugins/public/layout/extensions/fb-stubs/index.tsx b/desktop/plugins/public/layout/extensions/fb-stubs/SidebarExtensions.tsx
similarity index 61%
rename from desktop/plugins/public/layout/extensions/fb-stubs/index.tsx
rename to desktop/plugins/public/layout/extensions/fb-stubs/SidebarExtensions.tsx
index ad1957351..e4547f9f8 100644
--- a/desktop/plugins/public/layout/extensions/fb-stubs/index.tsx
+++ b/desktop/plugins/public/layout/extensions/fb-stubs/SidebarExtensions.tsx
@@ -9,11 +9,12 @@
 
 import type {Client, Logger, PluginClient, Element} from 'flipper';
 
-export default [] as Array<
-  (
-    client: PluginClient,
-    realClient: Client,
-    selectedNode: Element,
-    logger: Logger,
-  ) => React.ReactNode
->;
+export const SidebarExtensions: Record<
+  string,
+  React.FC<{
+    client: PluginClient;
+    realClient: Client;
+    selectedNode: Element;
+    logger: Logger;
+  }>
+> = {};