From 9d8d4057f65f981ab183660d84035d5d52086425 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Mon, 22 Jan 2018 15:52:37 -0800
Subject: [PATCH] Benchmark app component optimizations

---
 packages/benchmarks/src/app/Layout.js     | 11 +++-
 packages/benchmarks/src/app/ReportCard.js | 78 ++++++++++++-----------
 2 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/packages/benchmarks/src/app/Layout.js b/packages/benchmarks/src/app/Layout.js
index 05b9afc3..4f1ebd29 100644
--- a/packages/benchmarks/src/app/Layout.js
+++ b/packages/benchmarks/src/app/Layout.js
@@ -19,11 +19,13 @@ export default class Layout extends Component {
     const { widescreen } = this.state;
     return (
       <View onLayout={this._handleLayout} style={[styles.root, widescreen && styles.row]}>
-        <View style={widescreen ? styles.grow : styles.stackPanel}>{viewPanel}</View>
+        <View style={[widescreen ? styles.grow : styles.stackPanel, styles.layer]}>
+          {viewPanel}
+        </View>
         <View style={styles.grow}>
-          <View style={styles.grow}>{listPanel}</View>
+          <View style={[styles.grow, styles.layer]}>{listPanel}</View>
           <View style={styles.divider} />
-          <View>{actionPanel}</View>
+          <View style={styles.layer}>{actionPanel}</View>
         </View>
       </View>
     );
@@ -59,5 +61,8 @@ const styles = StyleSheet.create({
   },
   stackPanel: {
     height: '33.33%'
+  },
+  layer: {
+    transform: [{ translateZ: '0' }]
   }
 });
diff --git a/packages/benchmarks/src/app/ReportCard.js b/packages/benchmarks/src/app/ReportCard.js
index 3d3693cb..babab4e8 100644
--- a/packages/benchmarks/src/app/ReportCard.js
+++ b/packages/benchmarks/src/app/ReportCard.js
@@ -8,45 +8,49 @@ const fmt = (time: number) => {
   return 10 / i > 1 ? `0${i}` : i;
 };
 
-const ReportCard = ({
-  benchmarkName,
-  libraryName,
-  sampleCount,
-  mean,
-  stdDev,
-  runTime,
-  libraryVersion
-}) => {
-  const sampleCountText = sampleCount != null ? `(${sampleCount})` : '';
+class ReportCard extends React.PureComponent {
+  render() {
+    const {
+      benchmarkName,
+      libraryName,
+      sampleCount,
+      mean,
+      stdDev,
+      runTime,
+      libraryVersion
+    } = this.props;
 
-  return (
-    <View style={styles.root}>
-      <View style={styles.left}>
-        <Text numberOfLines={1} style={styles.bold}>
-          {`${libraryName}${libraryVersion ? '@' + libraryVersion : ''}`}
-        </Text>
-        <Text numberOfLines={1}>
-          {benchmarkName} {sampleCountText}
-        </Text>
+    const sampleCountText = sampleCount != null ? `(${sampleCount})` : '';
+
+    return (
+      <View style={styles.root}>
+        <View style={styles.left}>
+          <Text numberOfLines={1} style={styles.bold}>
+            {`${libraryName}${libraryVersion ? '@' + libraryVersion : ''}`}
+          </Text>
+          <Text numberOfLines={1}>
+            {benchmarkName} {sampleCountText}
+          </Text>
+        </View>
+        <View style={styles.right}>
+          {mean ? (
+            <Fragment>
+              <Text style={[styles.bold, styles.monoFont]}>
+                {fmt(mean)} ±{fmt(stdDev)} ms
+              </Text>
+              <Text style={[styles.monoFont, styles.centerText]}>
+                <Text style={styles.smallText}>Σ = </Text>
+                <Text>{Math.round(runTime)} ms</Text>
+              </Text>
+            </Fragment>
+          ) : (
+            <Text style={styles.bold}>In progress…</Text>
+          )}
+        </View>
       </View>
-      <View style={styles.right}>
-        {mean ? (
-          <Fragment>
-            <Text style={[styles.bold, styles.monoFont]}>
-              {fmt(mean)} ±{fmt(stdDev)} ms
-            </Text>
-            <Text style={[styles.monoFont, styles.centerText]}>
-              <Text style={styles.smallText}>Σ = </Text>
-              <Text>{Math.round(runTime)} ms</Text>
-            </Text>
-          </Fragment>
-        ) : (
-          <Text style={styles.bold}>In progress…</Text>
-        )}
-      </View>
-    </View>
-  );
-};
+    );
+  }
+}
 
 const styles = StyleSheet.create({
   root: {