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

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) => (