diff --git a/apps/web/src/arcade-games/know-your-world/components/MapRenderer.tsx b/apps/web/src/arcade-games/know-your-world/components/MapRenderer.tsx index 1f906009..95fb0737 100644 --- a/apps/web/src/arcade-games/know-your-world/components/MapRenderer.tsx +++ b/apps/web/src/arcade-games/know-your-world/components/MapRenderer.tsx @@ -514,33 +514,7 @@ export function MapRenderer({ // - handleLockReleased callback dispatches RELEASE_ANIMATION_DONE // ========================================================================== - // Debug: Log state machine state changes and verify sync (only in dev) - useEffect(() => { - if (process.env.NODE_ENV === 'development') { - // Compare state machine derived values with existing boolean state - const machineShowMagnifier = interactionMachine.showMagnifier - const machineIsPrecision = interactionMachine.isPrecisionMode - const machineIsReleasingPrecision = interactionMachine.isReleasingPrecision - - // Log state transitions with comparison - console.log('[StateMachine]', { - state: interactionMachine.state, - machine: { showMagnifier: machineShowMagnifier, isPrecision: machineIsPrecision }, - boolean: { showMagnifier, pointerLocked, isReleasingPointerLock }, - }) - - // Warn on sync divergence (helps identify missing sync effects) - // Note: Divergence is expected during transitions due to effect timing - } - }, [ - interactionMachine.state, - interactionMachine.showMagnifier, - interactionMachine.isPrecisionMode, - interactionMachine.isReleasingPrecision, - showMagnifier, - pointerLocked, - isReleasingPointerLock, - ]) + // Note: Debug logging for state machine sync removed after migration verified working // Give up reveal animation state const [giveUpFlashProgress, setGiveUpFlashProgress] = useState(0) // 0-1 pulsing value diff --git a/apps/web/src/arcade-games/know-your-world/features/interaction/useInteractionStateMachine.ts b/apps/web/src/arcade-games/know-your-world/features/interaction/useInteractionStateMachine.ts index e21db4ec..fce91517 100644 --- a/apps/web/src/arcade-games/know-your-world/features/interaction/useInteractionStateMachine.ts +++ b/apps/web/src/arcade-games/know-your-world/features/interaction/useInteractionStateMachine.ts @@ -719,31 +719,56 @@ export function useInteractionStateMachine(): UseInteractionStateMachineReturn { [isMagnifierPanning, isMagnifierPinching, isMapPanningMobile] ) - return { - state: machine.state, - context: machine.context, - previousState: machine.previousState, + // Memoize return value to prevent unnecessary re-renders in consumers + // This is critical because callbacks like handleLockAcquired depend on interactionMachine + return useMemo( + () => ({ + state: machine.state, + context: machine.context, + previousState: machine.previousState, - // State checks - isIdle, - isHovering, - isMagnifierVisible, - isMagnifierPanning, - isMagnifierPinching, - isMagnifierExpanded, - isMapPanningMobile, - isMapPanningDesktop, - isPrecisionMode, - isReleasingPrecision, + // State checks + isIdle, + isHovering, + isMagnifierVisible, + isMagnifierPanning, + isMagnifierPinching, + isMagnifierExpanded, + isMapPanningMobile, + isMapPanningDesktop, + isPrecisionMode, + isReleasingPrecision, - // Compound checks - showMagnifier, - showCursor, - isAnyPanning, - isMobileInteraction, + // Compound checks + showMagnifier, + showCursor, + isAnyPanning, + isMobileInteraction, - // Actions - send, - updateContext, - } + // Actions + send, + updateContext, + }), + [ + machine.state, + machine.context, + machine.previousState, + isIdle, + isHovering, + isMagnifierVisible, + isMagnifierPanning, + isMagnifierPinching, + isMagnifierExpanded, + isMapPanningMobile, + isMapPanningDesktop, + isPrecisionMode, + isReleasingPrecision, + showMagnifier, + showCursor, + isAnyPanning, + isMobileInteraction, + send, + updateContext, + ] + ) }