baekryang/responsive-image-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Resolve infinite loop in animationCallback using setState with updater function

Browse Source
This commit is contained in:
BaekRyang 2025-11-04 10:45:44 +09:00
parent d55e5c7bb7
commit 05b47fb177
5 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
dist/index.js vendored
View File

@ -402,10 +402,11 @@ var ImageDistortion = ({
}, [currentAreas, isReady]);
const animationCallback = (0, import_react2.useCallback)((deltaTime) => {
if (!isReady) return;
const updatedAreas = AnimationLoop.updateProgress(currentAreas, deltaTime);
const areasWithVectors = AnimationLoop.updateAreaDragVectors(updatedAreas);
setCurrentAreas(areasWithVectors);
}, [currentAreas, isReady]);
setCurrentAreas((prevAreas) => {
const updatedAreas = AnimationLoop.updateProgress(prevAreas, deltaTime);
return AnimationLoop.updateAreaDragVectors(updatedAreas);
});
}, [isReady]);
useAnimationFrame(animationCallback, isPlaying);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",

2
dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

9
dist/index.mjs vendored
View File

@ -358,10 +358,11 @@ var ImageDistortion = ({
}, [currentAreas, isReady]);
const animationCallback = useCallback((deltaTime) => {
if (!isReady) return;
const updatedAreas = AnimationLoop.updateProgress(currentAreas, deltaTime);
const areasWithVectors = AnimationLoop.updateAreaDragVectors(updatedAreas);
setCurrentAreas(areasWithVectors);
}, [currentAreas, isReady]);
setCurrentAreas((prevAreas) => {
const updatedAreas = AnimationLoop.updateProgress(prevAreas, deltaTime);
return AnimationLoop.updateAreaDragVectors(updatedAreas);
});
}, [isReady]);
useAnimationFrame(animationCallback, isPlaying);
return /* @__PURE__ */ jsx(
"div",

2
dist/index.mjs.map vendored
View File

File diff suppressed because one or more lines are too long

11
src/components/ImageDistortion.tsx
View File

@ -154,14 +154,13 @@ export const ImageDistortion: React.FC<ImageDistortionProps> = ({
const animationCallback = useCallback((deltaTime: number) => {
if (!isReady) return;
setCurrentAreas((prevAreas) => {
// 진행도 업데이트
const updatedAreas = AnimationLoop.updateProgress(currentAreas, deltaTime);
const updatedAreas = AnimationLoop.updateProgress(prevAreas, deltaTime);
// 드래그 벡터 업데이트
const areasWithVectors = AnimationLoop.updateAreaDragVectors(updatedAreas);
setCurrentAreas(areasWithVectors);
}, [currentAreas, isReady]);
return AnimationLoop.updateAreaDragVectors(updatedAreas);
});
}, [isReady]);
useAnimationFrame(animationCallback, isPlaying);