diff --git a/web/modals/threads/settings/thread-settings-general-tab.react.js b/web/modals/threads/settings/thread-settings-general-tab.react.js
--- a/web/modals/threads/settings/thread-settings-general-tab.react.js
+++ b/web/modals/threads/settings/thread-settings-general-tab.react.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import tinycolor from 'tinycolor2';
 
-import { threadHasPermission } from 'lib/shared/thread-utils.js';
+import { useThreadHasPermission } from 'lib/shared/thread-utils.js';
 import { type SetState } from 'lib/types/hook-types.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
@@ -80,7 +80,7 @@
     [setQueuedChanges, threadInfo.color],
   );
 
-  const threadNameInputDisabled = !threadHasPermission(
+  const threadNameInputDisabled = !useThreadHasPermission(
     threadInfo,
     threadPermissions.EDIT_THREAD_NAME,
   );
diff --git a/web/modals/threads/settings/thread-settings-modal.react.js b/web/modals/threads/settings/thread-settings-modal.react.js
--- a/web/modals/threads/settings/thread-settings-modal.react.js
+++ b/web/modals/threads/settings/thread-settings-modal.react.js
@@ -13,8 +13,8 @@
 import { getAvailableRelationshipButtons } from 'lib/shared/relationship-utils.js';
 import {
   getSingleOtherUser,
-  threadHasPermission,
   threadUIName,
+  useThreadHasPermission,
 } from 'lib/shared/thread-utils.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { RelationshipButton } from 'lib/types/relationship-types.js';
@@ -97,32 +97,51 @@
       return getAvailableRelationshipButtons(otherUserInfo);
     }, [otherUserInfo]);
 
+    const canEditThreadName = useThreadHasPermission(
+      threadInfo,
+      threadPermissions.EDIT_THREAD_NAME,
+    );
+    const canEditThreadColor = useThreadHasPermission(
+      threadInfo,
+      threadPermissions.EDIT_THREAD_COLOR,
+    );
+    const canEditThreadDescription = useThreadHasPermission(
+      threadInfo,
+      threadPermissions.EDIT_THREAD_DESCRIPTION,
+    );
+    const canEditThreadPermissions = useThreadHasPermission(
+      threadInfo,
+      threadPermissions.EDIT_PERMISSIONS,
+    );
+    const canDeleteThread = useThreadHasPermission(
+      threadInfo,
+      threadPermissions.DELETE_THREAD,
+    );
+
     const hasPermissionForTab = React.useCallback(
       // ESLint doesn't recognize that invariant always throws
       // eslint-disable-next-line consistent-return
       (thread: ThreadInfo, tab: TabType) => {
         if (tab === 'general') {
           return (
-            threadHasPermission(thread, threadPermissions.EDIT_THREAD_NAME) ||
-            threadHasPermission(thread, threadPermissions.EDIT_THREAD_COLOR) ||
-            threadHasPermission(
-              thread,
-              threadPermissions.EDIT_THREAD_DESCRIPTION,
-            )
+            canEditThreadName || canEditThreadColor || canEditThreadDescription
           );
         } else if (tab === 'privacy') {
-          return threadHasPermission(
-            thread,
-            threadPermissions.EDIT_PERMISSIONS,
-          );
+          return canEditThreadPermissions;
         } else if (tab === 'delete') {
-          return threadHasPermission(thread, threadPermissions.DELETE_THREAD);
+          return canDeleteThread;
         } else if (tab === 'relationship') {
           return true;
         }
         invariant(false, `invalid tab: ${tab}`);
       },
-      [],
+      [
+        canEditThreadName,
+        canEditThreadColor,
+        canEditThreadDescription,
+        canEditThreadPermissions,
+        canDeleteThread,
+      ],
     );
 
     React.useEffect(() => {