diff --git a/native/components/unread-dot.react.js b/native/components/unread-dot.react.js
--- a/native/components/unread-dot.react.js
+++ b/native/components/unread-dot.react.js
@@ -13,18 +13,26 @@
   const { unread } = props;
   const colors = useColors();
 
-  const unreadDotStyle = React.useMemo(() => {
-    return { opacity: unread ? 1 : 0 };
-  }, [unread]);
-
-  return (
-    <View style={unreadDotStyle}>
+  const colorSplotch = React.useMemo(
+    () => (
       <ColorSplotch
         color={`${colors.listForegroundSecondaryLabel.slice(1)}`}
         size="micro"
       />
-    </View>
+    ),
+    [colors.listForegroundSecondaryLabel],
   );
+
+  const unreadDotStyle = React.useMemo(() => {
+    return { opacity: unread ? 1 : 0 };
+  }, [unread]);
+
+  const unreadDot = React.useMemo(
+    () => <View style={unreadDotStyle}>{colorSplotch}</View>,
+    [colorSplotch, unreadDotStyle],
+  );
+
+  return unreadDot;
 }
 
 export default UnreadDot;