diff --git a/web/modals/threads/thread-settings-modal.react.js b/web/modals/threads/thread-settings-modal.react.js
--- a/web/modals/threads/thread-settings-modal.react.js
+++ b/web/modals/threads/thread-settings-modal.react.js
@@ -97,6 +97,7 @@
   +changeQueued: boolean,
   +onChangeName: (event: SyntheticEvent<HTMLInputElement>) => void,
   +onChangeDescription: (event: SyntheticEvent<HTMLTextAreaElement>) => void,
+  +onChangeColor: (color: string) => void,
 };
 class ThreadSettingsModal extends React.PureComponent<Props> {
   nameInput: ?HTMLInputElement;
@@ -175,7 +176,7 @@
           threadDescriptionOnChange={this.props.onChangeDescription}
           threadDescriptionDisabled={inputDisabled}
           threadColorCurrentColor={this.possiblyChangedValue('color')}
-          threadColorOnColorSelection={this.onChangeColor}
+          threadColorOnColorSelection={this.props.onChangeColor}
         />
       );
     } else if (this.props.currentTabType === 'privacy') {
@@ -295,16 +296,6 @@
     this.accountPasswordInput = accountPasswordInput;
   };
 
-  onChangeColor = (color: string) => {
-    const newValue = color !== this.props.threadInfo.color ? color : undefined;
-    this.props.setQueuedChanges(
-      Object.freeze({
-        ...this.props.queuedChanges,
-        color: newValue,
-      }),
-    );
-  };
-
   onChangeThreadType = (event: SyntheticEvent<HTMLInputElement>) => {
     const uiValue = assertThreadType(parseInt(event.currentTarget.value, 10));
     const newValue =
@@ -442,15 +433,31 @@
     const onChangeDescription = React.useCallback(
       (event: SyntheticEvent<HTMLTextAreaElement>) => {
         const target = event.currentTarget;
-        setQueuedChanges({
-          ...queuedChanges,
-          description:
-            target.value !== threadInfo?.description ? target.value : undefined,
-        });
+        setQueuedChanges(
+          Object.freeze({
+            ...queuedChanges,
+            description:
+              target.value !== threadInfo?.description
+                ? target.value
+                : undefined,
+          }),
+        );
       },
       [queuedChanges, threadInfo?.description],
     );
 
+    const onChangeColor = React.useCallback(
+      (color: string) => {
+        setQueuedChanges(
+          Object.freeze({
+            ...queuedChanges,
+            color: color !== threadInfo?.color ? color : undefined,
+          }),
+        );
+      },
+      [queuedChanges, threadInfo?.color],
+    );
+
     if (!threadInfo) {
       return (
         <Modal onClose={modalContext.clearModal} name="Invalid thread">
@@ -484,6 +491,7 @@
         changeQueued={changeQueued}
         onChangeName={onChangeName}
         onChangeDescription={onChangeDescription}
+        onChangeColor={onChangeColor}
       />
     );
   },