jan-henrik/respira
1
0
Fork 0
mirror of https://github.com/jhbruhn/respira.git synced 2026-01-27 10:23:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #29 from jhbruhn/fix/state-during-render-usePatternTransform

Browse source 
fix: Resolve state-during-render anti-pattern in usePatternTransform
This commit is contained in:
Jan-Henrik Bruhn 2025-12-26 21:34:54 +01:00 committed by GitHub
commit 446f1b0639
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 34 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/hooks/usePatternTransform.ts
View file

@ -39,22 +39,41 @@ export function usePatternTransform({
const patternGroupRef = useRef<Konva.Group | null>(null);
const transformerRef = useRef<Konva.Transformer | null>(null);
// Update pattern offset when initialPatternOffset changes
if (
initialPatternOffset &&
(localPatternOffset.x !== initialPatternOffset.x ||
localPatternOffset.y !== initialPatternOffset.y)
) {
setLocalPatternOffset(initialPatternOffset);
}
// Track previous prop values to detect external changes
const prevOffsetRef = useRef(initialPatternOffset);
const prevRotationRef = useRef(initialPatternRotation);
// Update pattern rotation when initialPatternRotation changes
if (
initialPatternRotation !== undefined &&
localPatternRotation !== initialPatternRotation
) {
setLocalPatternRotation(initialPatternRotation);
}
// Sync local state with parent props when they change externally
// This implements a "partially controlled" pattern needed for Konva drag interactions:
// - Local state enables optimistic updates during drag/transform (immediate visual feedback)
// - Parent props sync when external changes occur (e.g., pattern upload resets position)
// - Previous value refs prevent sync loops by only updating when props genuinely change
useEffect(() => {
if (
initialPatternOffset &&
(prevOffsetRef.current.x !== initialPatternOffset.x ||
prevOffsetRef.current.y !== initialPatternOffset.y)
) {
// This setState in effect is intentional and safe: it only runs when the parent
// prop changes, not in response to our own local updates
// eslint-disable-next-line react-hooks/set-state-in-effect
setLocalPatternOffset(initialPatternOffset);
prevOffsetRef.current = initialPatternOffset;
}
}, [initialPatternOffset]);
useEffect(() => {
if (
initialPatternRotation !== undefined &&
prevRotationRef.current !== initialPatternRotation
) {
// This setState in effect is intentional and safe: it only runs when the parent
// prop changes, not in response to our own local updates
// eslint-disable-next-line react-hooks/set-state-in-effect
setLocalPatternRotation(initialPatternRotation);
prevRotationRef.current = initialPatternRotation;
}
}, [initialPatternRotation]);
// Attach/detach transformer based on state
const attachTransformer = useCallback(() => {