diff --git a/src/ui/components/MacroViewer.tsx b/src/ui/components/MacroViewer.tsx
index bf7d265..7bf0ecd 100644
--- a/src/ui/components/MacroViewer.tsx
+++ b/src/ui/components/MacroViewer.tsx
@@ -25,7 +25,6 @@ export default function MacroViewer({
 			);
 
 			plugin.saveSettings();
-			this.forceUpdate();
 			updateMacroCommands(plugin);
 			modal.close();
 		};
@@ -36,7 +35,6 @@ export default function MacroViewer({
 	const handleDelete = (idx: number): void => {
 		macros.splice(idx, 1);
 		plugin.saveSettings();
-		this.forceUpdate();
 		updateMacroCommands(plugin);
 	};
 
diff --git a/src/ui/components/commandViewerComponent.tsx b/src/ui/components/commandViewerComponent.tsx
index 0863792..3c234b6 100644
--- a/src/ui/components/commandViewerComponent.tsx
+++ b/src/ui/components/commandViewerComponent.tsx
@@ -47,7 +47,6 @@ export default function CommandViewer({
 											).didChooseRemove())
 										) {
 											await manager.removeCommand(cmd);
-											this.forceUpdate();
 										}
 									}}
 									handleUp={(): void => {
@@ -57,7 +56,6 @@ export default function CommandViewer({
 											idx - 1
 										);
 										manager.reorder();
-										this.forceUpdate();
 									}}
 									handleDown={(): void => {
 										arrayMoveMutable(
@@ -66,7 +64,6 @@ export default function CommandViewer({
 											idx + 1
 										);
 										manager.reorder();
-										this.forceUpdate();
 									}}
 									handleRename={async (
 										name
@@ -74,7 +71,6 @@ export default function CommandViewer({
 										cmd.name = name;
 										await plugin.saveSettings();
 										manager.reorder();
-										this.forceUpdate();
 									}}
 									handleNewIcon={async (): Promise<void> => {
 										const newIcon =
@@ -85,7 +81,6 @@ export default function CommandViewer({
 											cmd.icon = newIcon;
 											await plugin.saveSettings();
 											manager.reorder();
-											this.forceUpdate();
 										}
 										dispatchEvent(
 											new Event("cmdr-icon-changed")
@@ -110,7 +105,6 @@ export default function CommandViewer({
 											mode || modes[currentIdx + 1];
 										await plugin.saveSettings();
 										manager.reorder();
-										this.forceUpdate();
 									}}
 									handleColorChange={async (
 										color?: string
@@ -147,7 +141,6 @@ export default function CommandViewer({
 							const pair = await chooseNewCommand(plugin);
 							await manager.addCommand(pair);
 							manager.reorder();
-							this.forceUpdate();
 						}}
 					>
 						{t("Add command")}
diff --git a/src/ui/components/mobileModifyComponent.tsx b/src/ui/components/mobileModifyComponent.tsx
index 0d61d2c..68f8e36 100644
--- a/src/ui/components/mobileModifyComponent.tsx
+++ b/src/ui/components/mobileModifyComponent.tsx
@@ -1,5 +1,4 @@
 import { h } from "preact";
-import { useEffect } from "preact/hooks";
 import t from "src/l10n";
 import { ObsidianIcon } from "src/util";
 import MobileModifyModal from "../mobileModifyModal";
@@ -7,20 +6,12 @@ import { ColorPicker } from "./ColorPicker";
 import CommanderPlugin from "src/main";
 
 export default function MobileModifyComponent({
-	plugin,	
+	plugin,
 	modal: controller,
 }: {
 	plugin: CommanderPlugin;
 	modal: MobileModifyModal;
 }): h.JSX.Element {
-	useEffect(() => {
-		const update = (): void => {
-			this.forceUpdate();
-		};
-		addEventListener("cmdr-icon-changed", update);
-		return (): void => removeEventListener("cmdr-icon-changed", update);
-	}, []);
-
 	return (
 		<div className="cmdr-mobile-modify-grid">
 			<div