perf: Optimize BinaryDigit

Unrolls the digit into a static four or six dot column. Combined with an updated `useBinaryTime` hook which preserves object references at the bit level (where possible), now only the dots which change with the new time get rerendered.

As a result, typical full render times are below 5ms. When a time update affects multiple digits render times can occasionally climb to ~12ms.

Author: thehale

src/components/BinaryDigit.tsx

@@ -4,7 +4,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-import {StyleSheet, Text, View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 
 import BinaryDot from './BinaryDot';
 import React from 'react';
@@ -25,21 +25,48 @@ const DEFAULTS = {
 
 const BinaryDigit: React.FC<BinaryDigitProps> = args => {
   const props = {...DEFAULTS, ...args};
+  if (props.digit.bits.length === 4) {
+    return <FourDigit {...props} />;
+  } else if (props.digit.bits.length === 6) {
+    return <SixDigit {...props} />;
+  } else {
+    throw new Error(`Invalid digit length: ${props.digit.bits.length}`);
+  }
+};
+
+const FourDigit: React.FC<BinaryDigitProps> = props => {
+  const settings = {
+    brightness: props.brightness,
+    roundness: props.roundness,
+    showHints: props.showHints,
+  };
+  return (
+    <View style={styles.pair}>
+      <View style={styles.digit}>
+        <BinaryDot bit={props.digit.bits[0]} {...settings} />
+        <BinaryDot bit={props.digit.bits[1]} {...settings} />
+        <BinaryDot bit={props.digit.bits[2]} {...settings} />
+        <BinaryDot bit={props.digit.bits[3]} {...settings} />
+      </View>
+    </View>
+  );
+};
+
+const SixDigit: React.FC<BinaryDigitProps> = props => {
+  const settings = {
+    brightness: props.brightness,
+    roundness: props.roundness,
+    showHints: props.showHints,
+  };
   return (
     <View style={styles.pair}>
       <View style={styles.digit}>
-        {props.digit.bits.map((bit, idx) => (
-          <BinaryDot
-            key={idx}
-            bit={bit}
-            brightness={props.brightness}
-            roundness={props.roundness}
-            showHints={props.showHints}
-          />
-        ))}
-        {props.showHints && (
-          <Text style={styles.hint}>{props.digit.value}</Text>
-        )}
+        <BinaryDot bit={props.digit.bits[0]} {...settings} />
+        <BinaryDot bit={props.digit.bits[1]} {...settings} />
+        <BinaryDot bit={props.digit.bits[2]} {...settings} />
+        <BinaryDot bit={props.digit.bits[3]} {...settings} />
+        <BinaryDot bit={props.digit.bits[4]} {...settings} />
+        <BinaryDot bit={props.digit.bits[5]} {...settings} />
       </View>
     </View>
   );

src/utils/useBinaryTime.ts

@@ -1,6 +1,7 @@
-import { useState, useEffect } from "react";
-import { BinaryTimeMode, asBinaryTime } from "./binaryTime";
-import { useTime } from "./useTime";
+import {useState, useEffect} from 'react';
+import {BinaryTimeMode, asBinaryTime} from './binaryTime';
+import {useTime} from './useTime';
+import isEqual from 'lodash/isEqual';
 
 export function useBinaryTime(
   mode: BinaryTimeMode = BinaryTimeMode.SINGLE_DIGITS,
@@ -14,8 +15,16 @@ export function useBinaryTime(
       prev.map((digit, idx) => {
         if (digit.value === newDigits[idx].value) {
           return digit;
+        } else {
+          // Where possible, preserve object references on a per-bit basis.
+          return {
+            value: newDigits[idx].value,
+            bits: digit.bits.map((bit, bitIdx) => {
+              const newBit = newDigits[idx].bits[bitIdx];
+              return isEqual(bit, newBit) ? bit : newBit;
+            }),
+          };
         }
-        return newDigits[idx];
       }),
     );
   }, [time, mode]);