Extracted and memoized components

Summary: Just small refactoring to extract / memoize some of components

Reviewed By: mweststrate

Differential Revision: D28055699

fbshipit-source-id: 3d689a4e41e3f3c4c4e2e8cc2887cb255b4c4dc2

desktop/plugins/public/databases/ButtonNavigation.tsx

@@ -10,40 +10,42 @@
 import {Button, ButtonGroup, Glyph, colors} from 'flipper';
 import React from 'react';
 
-export default function ButtonNavigation(props: {
-  /** Back button is enabled */
-  canGoBack: boolean;
-  /** Forwards button is enabled */
-  canGoForward: boolean;
-  /** Callback when back button is clicked */
-  onBack: () => void;
-  /** Callback when forwards button is clicked */
-  onForward: () => void;
-}) {
-  return (
-    <ButtonGroup>
-      <Button disabled={!props.canGoBack} onClick={props.onBack}>
-        <Glyph
-          name="chevron-left"
-          size={16}
-          color={
-            props.canGoBack
-              ? colors.macOSTitleBarIconActive
-              : colors.macOSTitleBarIconBlur
-          }
-        />
-      </Button>
-      <Button disabled={!props.canGoForward} onClick={props.onForward}>
-        <Glyph
-          name="chevron-right"
-          size={16}
-          color={
-            props.canGoForward
-              ? colors.macOSTitleBarIconActive
-              : colors.macOSTitleBarIconBlur
-          }
-        />
-      </Button>
-    </ButtonGroup>
-  );
-}
+export default React.memo(
+  (props: {
+    /** Back button is enabled */
+    canGoBack: boolean;
+    /** Forwards button is enabled */
+    canGoForward: boolean;
+    /** Callback when back button is clicked */
+    onBack: () => void;
+    /** Callback when forwards button is clicked */
+    onForward: () => void;
+  }) => {
+    return (
+      <ButtonGroup>
+        <Button disabled={!props.canGoBack} onClick={props.onBack}>
+          <Glyph
+            name="chevron-left"
+            size={16}
+            color={
+              props.canGoBack
+                ? colors.macOSTitleBarIconActive
+                : colors.macOSTitleBarIconBlur
+            }
+          />
+        </Button>
+        <Button disabled={!props.canGoForward} onClick={props.onForward}>
+          <Glyph
+            name="chevron-right"
+            size={16}
+            color={
+              props.canGoForward
+                ? colors.macOSTitleBarIconActive
+                : colors.macOSTitleBarIconBlur
+            }
+          />
+        </Button>
+      </ButtonGroup>
+    );
+  },
+);