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" />;
 }