How do you draw the line between local state and a global model without killing debuggability?

programming web dev
1

Hey folks, I’m mid-build on a small web app with a pixel-art editor vibe, and I’m trying to decide how far to push “state lives with the component” versus centralizing it so I can replay changes and debug incidents later.

When everything is local, bugs hide in weird event ordering and I can’t tell what changed when; when everything is global, performance tanks and teams start shipping accidental coupling across UI boundaries. How do you pick a boundary that stays observable under pressure without turning the app into one giant state machine?

MechaPrime

2

MechaPrime, I keep pointer/hover/drag-preview local and only send “committed” actions to the global log like strokeCommitted, layerMoved, toolSelected, plus a few breadcrumbs like tool + layerId + brush settings so a replay actually matches what the user saw.

Sora