diff --git a/web/modals/threads/color-selector.react.js b/web/modals/threads/color-selector.react.js
index 74c5f9dd0..d66ddf3f6 100644
--- a/web/modals/threads/color-selector.react.js
+++ b/web/modals/threads/color-selector.react.js
@@ -1,73 +1,33 @@
 // @flow
 
 import * as React from 'react';
 
 import { selectedThreadColors } from 'lib/shared/thread-utils';
 
 import ColorSelectorButton from './color-selector-button.react';
 import css from './color-selector.css';
 
 type ColorSelectorProps = {
   +currentColor: string,
   +onColorSelection: (hex: string) => void,
 };
 function ColorSelector(props: ColorSelectorProps): React.Node {
   const { currentColor, onColorSelection } = props;
 
-  return (
-    <div className={css.container}>
-      <ColorSelectorButton
-        color={selectedThreadColors[0]}
-        currentColor={currentColor}
-        onColorSelection={onColorSelection}
-      />
-      <ColorSelectorButton
-        color={selectedThreadColors[1]}
-        currentColor={currentColor}
-        onColorSelection={onColorSelection}
-      />
-      <ColorSelectorButton
-        color={selectedThreadColors[2]}
-        currentColor={currentColor}
-        onColorSelection={onColorSelection}
-      />
-      <ColorSelectorButton
-        color={selectedThreadColors[3]}
-        currentColor={currentColor}
-        onColorSelection={onColorSelection}
-      />
-      <ColorSelectorButton
-        color={selectedThreadColors[4]}
-        currentColor={currentColor}
-        onColorSelection={onColorSelection}
-      />
-      <ColorSelectorButton
-        color={selectedThreadColors[5]}
-        currentColor={currentColor}
-        onColorSelection={onColorSelection}
-      />
-      <ColorSelectorButton
-        color={selectedThreadColors[6]}
-        currentColor={currentColor}
-        onColorSelection={onColorSelection}
-      />
-      <ColorSelectorButton
-        color={selectedThreadColors[7]}
-        currentColor={currentColor}
-        onColorSelection={onColorSelection}
-      />
-      <ColorSelectorButton
-        color={selectedThreadColors[8]}
-        currentColor={currentColor}
-        onColorSelection={onColorSelection}
-      />
-      <ColorSelectorButton
-        color={selectedThreadColors[9]}
-        currentColor={currentColor}
-        onColorSelection={onColorSelection}
-      />
-    </div>
+  const colorSelectorButtons = React.useMemo(
+    () =>
+      selectedThreadColors.map(color => (
+        <ColorSelectorButton
+          key={color}
+          color={color}
+          currentColor={currentColor}
+          onColorSelection={onColorSelection}
+        />
+      )),
+    [currentColor, onColorSelection],
   );
+
+  return <div className={css.container}>{colorSelectorButtons}</div>;
 }
 
 export default ColorSelector;