fix(P4A): ImageAnnotator effect-race — stabilize onCancel via ref so URL.revoke doesn't fire mid-decode

This commit is contained in:
byGalax
2026-05-17 01:01:27 +02:00
parent eeb713f03d
commit 1e139fb86e
+11 -2
View File
@@ -41,6 +41,15 @@ export function ImageAnnotator({ file, onCancel, onSave }: Props) {
const draftRef = useRef<AnnotatorOp | null>(null);
const [draftTick, setDraftTick] = useState(0);
// Hold a stable ref to onCancel so the image-load effect doesn't depend
// on its identity. Without this, parents that pass an inline `() => …`
// re-render the modal on every keystroke / state change, the effect re-
// runs, the previous URL.createObjectURL gets revoked WHILE the new img
// is still decoding → img.onerror fires ("file not found") → onCancel →
// modal flashes open + closes instantly.
const onCancelRef = useRef(onCancel);
useEffect(() => { onCancelRef.current = onCancel; }, [onCancel]);
useEffect(() => {
const url = URL.createObjectURL(file);
const img = new Image();
@@ -50,11 +59,11 @@ export function ImageAnnotator({ file, onCancel, onSave }: Props) {
};
img.onerror = () => {
console.error('ImageAnnotator: failed to decode source image');
onCancel();
onCancelRef.current();
};
img.src = url;
return () => URL.revokeObjectURL(url);
}, [file, onCancel]);
}, [file]);
useEffect(() => {
if (!imageLoaded) return;