diff --git a/src/hooks/use-image-converter.ts b/src/hooks/use-image-converter.ts index 41ce503..8618384 100644 --- a/src/hooks/use-image-converter.ts +++ b/src/hooks/use-image-converter.ts @@ -27,12 +27,13 @@ export function useImageConverter() { const [isConverting, setIsConverting] = useState(false); const [convertingIndex, setConvertingIndex] = useState(null); + // Effect to clean up all object URLs when the component unmounts useEffect(() => { - const urls = images.map(img => img.previewUrl); return () => { - urls.forEach(url => URL.revokeObjectURL(url)); + images.forEach(image => URL.revokeObjectURL(image.previewUrl)); }; - }, [images]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); const updateSettings = useCallback((newSettings: Partial) => { setSettings(prev => ({ ...prev, ...newSettings })); @@ -70,10 +71,11 @@ export function useImageConverter() { }, []); const handleClearAll = useCallback(() => { + images.forEach(image => URL.revokeObjectURL(image.previewUrl)); setImages([]); updateSettings({ width: initialSettings.width, height: initialSettings.height }); toast.info("All images cleared."); - }, [updateSettings]); + }, [images, updateSettings]); const handleFilenameChange = useCallback((index: number, newName: string) => { setImages(prev => {