diff --git a/src/ui/components/MacroViewer.tsx b/src/ui/components/MacroViewer.tsx
index bf7d265..02cae49 100644
--- a/src/ui/components/MacroViewer.tsx
+++ b/src/ui/components/MacroViewer.tsx
@@ -1,5 +1,6 @@
 import { Platform } from "obsidian";
 import { Fragment, h } from "preact";
+import { useState } from "preact/hooks";
 import t from "src/l10n";
 import CommanderPlugin from "src/main";
 import { Macro } from "src/types";
@@ -16,6 +17,8 @@ export default function MacroViewer({
 	plugin,
 	macros,
 }: MacroBuilderProps): h.JSX.Element {
+	const [, rerender] = useState(0);
+	const forceUpdate = (): void => rerender((n) => n + 1);
 	const handleBuilder = (macro: Macro, idx?: number): void => {
 		const onClose = (updatedMacro: Macro): void => {
 			macros.splice(
@@ -25,7 +28,7 @@ export default function MacroViewer({
 			);
 
 			plugin.saveSettings();
-			this.forceUpdate();
+			forceUpdate();
 			updateMacroCommands(plugin);
 			modal.close();
 		};
@@ -36,7 +39,7 @@ export default function MacroViewer({
 	const handleDelete = (idx: number): void => {
 		macros.splice(idx, 1);
 		plugin.saveSettings();
-		this.forceUpdate();
+		forceUpdate();
 		updateMacroCommands(plugin);
 	};