From 19eb53596bdfdb2e303db425ef91a889d862da7a Mon Sep 17 00:00:00 2001
From: Taesu <bytaesu@gmail.com>
Date: Tue, 16 Dec 2025 11:40:46 +0900
Subject: [PATCH] image cleanup

---
 demo/nextjs/hooks/use-image-preview.ts | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/demo/nextjs/hooks/use-image-preview.ts b/demo/nextjs/hooks/use-image-preview.ts
index 595fe21b34..1d1674c8a3 100644
--- a/demo/nextjs/hooks/use-image-preview.ts
+++ b/demo/nextjs/hooks/use-image-preview.ts
@@ -1,8 +1,23 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 export function useImagePreview() {
 	const [image, setImage] = useState<File | null>(null);
 	const [imagePreview, setImagePreview] = useState<string | null>(null);
+	const imagePreviewRef = useRef<string | null>(null);
+
+	// Keep ref in sync with state for cleanup
+	useEffect(() => {
+		imagePreviewRef.current = imagePreview;
+	}, [imagePreview]);
+
+	// Cleanup on unmount
+	useEffect(() => {
+		return () => {
+			if (imagePreviewRef.current) {
+				URL.revokeObjectURL(imagePreviewRef.current);
+			}
+		};
+	}, []);
 
 	const handleImageChange = useCallback(
 		(e: React.ChangeEvent<HTMLInputElement>) => {