From 7217a1193e4f86e61281152fd678c311be516b64 Mon Sep 17 00:00:00 2001
From: Joseph Hale <me@jhale.dev>
Date: Mon, 23 Jun 2025 07:53:27 -0700
Subject: [PATCH] perf: Unroll `BinaryDigit`s to speed up rendering

Instead of recreating new `BinaryDigit` components on every render, each digit is now specifically named.

Combined with the previous commit's work to improve referential stability at the digit level, these changes cut the average render time down from 14-22ms on every tick to <1ms when the time doesn't change and 4-10ms when the time does change.
---
 src/components/BinaryClock.tsx | 93 +++++++++++++++++++++++++++++-----
 1 file changed, 80 insertions(+), 13 deletions(-)

diff --git a/src/components/BinaryClock.tsx b/src/components/BinaryClock.tsx
index ffc0d26..2013cd7 100644
--- a/src/components/BinaryClock.tsx
+++ b/src/components/BinaryClock.tsx
@@ -28,23 +28,90 @@ const DEFAULTS = {
 
 const BinaryClock: React.FC<BinaryClockProps> = args => {
   const props = {...DEFAULTS, ...args};
-  const digits = useBinaryTime(
-    props.orientation === Orientation.Landscape
-      ? BinaryTimeMode.DOUBLE_DIGITS
-      : BinaryTimeMode.SINGLE_DIGITS,
+  if (props.orientation === Orientation.Landscape) {
+    return <LandscapeClock {...props} />;
+  } else if (props.orientation === Orientation.Portrait) {
+    return <PortraitClock {...props} />;
+  } else {
+    throw new Error(`Invalid orientation: ${props.orientation}`);
+  }
+};
+
+const LandscapeClock: React.FC<BinaryClockProps> = props => {
+  const digits = useBinaryTime(BinaryTimeMode.DOUBLE_DIGITS);
+  return (
+    <View style={styles.binaryClock}>
+      <BinaryDigit
+        key="hours-tens"
+        digit={digits[0]}
+        brightness={props.brightness}
+        roundness={props.roundness}
+        showHints={props.showHints}
+      />
+      <BinaryDigit
+        key="hours-ones"
+        digit={digits[1]}
+        brightness={props.brightness}
+        roundness={props.roundness}
+        showHints={props.showHints}
+      />
+      <BinaryDigit
+        key="minutes-tens"
+        digit={digits[2]}
+        brightness={props.brightness}
+        roundness={props.roundness}
+        showHints={props.showHints}
+      />
+      <BinaryDigit
+        key="minutes-ones"
+        digit={digits[3]}
+        brightness={props.brightness}
+        roundness={props.roundness}
+        showHints={props.showHints}
+      />
+      <BinaryDigit
+        key="seconds-tens"
+        digit={digits[4]}
+        brightness={props.brightness}
+        roundness={props.roundness}
+        showHints={props.showHints}
+      />
+      <BinaryDigit
+        key="seconds-ones"
+        digit={digits[5]}
+        brightness={props.brightness}
+        roundness={props.roundness}
+        showHints={props.showHints}
+      />
+    </View>
   );
+};
 
+const PortraitClock: React.FC<BinaryClockProps> = props => {
+  const digits = useBinaryTime(BinaryTimeMode.SINGLE_DIGITS);
   return (
     <View style={styles.binaryClock}>
-      {digits.map((digit, idx) => (
-        <BinaryDigit
-          key={idx}
-          digit={digit}
-          brightness={props.brightness}
-          roundness={props.roundness}
-          showHints={props.showHints}
-        />
-      ))}
+      <BinaryDigit
+        key="hours"
+        digit={digits[0]}
+        brightness={props.brightness}
+        roundness={props.roundness}
+        showHints={props.showHints}
+      />
+      <BinaryDigit
+        key="minutes"
+        digit={digits[1]}
+        brightness={props.brightness}
+        roundness={props.roundness}
+        showHints={props.showHints}
+      />
+      <BinaryDigit
+        key="seconds"
+        digit={digits[2]}
+        brightness={props.brightness}
+        roundness={props.roundness}
+        showHints={props.showHints}
+      />
     </View>
   );
 };
-- 
2.51.2