From 82c83c4554104d4e3e0af4a899fe911178fef0d1 Mon Sep 17 00:00:00 2001
From: Szymon Nowakowski <renati@renati.me>
Date: Thu, 16 Oct 2025 01:31:27 +0200
Subject: [PATCH] Fix attachment double render

---
 packages/frontend/src/routes/Attachment.tsx | 25 +++++++++++----------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/routes/Attachment.tsx b/packages/frontend/src/routes/Attachment.tsx
index ac5e54c..d7502ff 100644
--- a/packages/frontend/src/routes/Attachment.tsx
+++ b/packages/frontend/src/routes/Attachment.tsx
@@ -60,7 +60,8 @@ namespace MusicXmlAttachment {
 function MusicXmlAttachment({ data, mediaType }: MusicXmlAttachment.Props) {
 
 	const containerRef = useRef<HTMLDivElement>(null);
-	const renderFn = useRef<null | (() => void)>(null);
+
+	const [renderFn, setRenderFn] = useState<null | (() => void)>(null);
 
 	const load = useCallback(async () => {
 
@@ -115,24 +116,24 @@ function MusicXmlAttachment({ data, mediaType }: MusicXmlAttachment.Props) {
 			renderSingleHorizontalStaffline: true,
 		});
 
-		const render = () => osmd.render();
-
 		await osmd.load(musicXml);
-		render();
-
-		renderFn.current = render;
-	}, [data]);
+		setRenderFn(() => osmd.render());
+	}, [data, mediaType]);
 
 	useEffect(() => void load(), [load]);
 
-	useEffect(() => {
-		const render = () => renderFn.current?.();
+	useLayoutEffect(() => {
+		renderFn?.();
+	}, [renderFn]);
 
-		window.addEventListener("resize", render);
+	useEffect(() => {
+		if (renderFn === null) return;
+
+		window.addEventListener("resize", renderFn);
 		return () => {
-			window.removeEventListener("resize", render);
+			window.removeEventListener("resize", renderFn);
 		};
-	}, []);
+	}, [renderFn]);
 
 	return <div ref={containerRef} className="w-full h-full overflow-scroll" />;
 }