diff --git a/native/components/unread-dot.react.js b/native/components/unread-dot.react.js
index 6c71b4b3c..a8e8f1a84 100644
--- a/native/components/unread-dot.react.js
+++ b/native/components/unread-dot.react.js
@@ -1,30 +1,39 @@
 // @flow
 
 import * as React from 'react';
 import { View } from 'react-native';
 
 import ColorSplotch from './color-splotch.react.js';
 import { useColors } from '../themes/colors.js';
 
 type Props = {
   +unread: ?boolean,
 };
 function UnreadDot(props: Props): React.Node {
   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(
+    () => ({ opacity: unread ? 1 : 0 }),
+    [unread],
   );
+
+  const unreadDot = React.useMemo(
+    () => <View style={unreadDotStyle}>{colorSplotch}</View>,
+    [colorSplotch, unreadDotStyle],
+  );
+
+  return unreadDot;
 }
 
 export default UnreadDot;