xstate-viz icon indicating copy to clipboard operation
xstate-viz copied to clipboard

Refactor item for graph layout

Open davidkpiano opened this issue 4 years ago • 0 comments

Ok, I see - we send the GRAPH_UPDATED in the useEffect but the last render that did happen was rendering based on the "success" state of the previous layout.

The used solution IMHO tries to fight the React and tries to wait, implicitly, on what should happen most of the time - but there are no conceptual guarantees that this will actually happen. For instance - we can click on another actor in the meantime and create a race condition.

It would be better if we could just avoid any chance of such things happening by making the synchronization of the DOM and Elk layouts more explicit, like for example here: https://github.com/statelyai/xstate-viz/commit/92d434ae22505f2fe04dd59112afcce1476414fe

I think it would be possible to avoid those duplicated effects but we'd have to implement derived state from props pattern and we'd have to avoid rendering based on state.matches('success'). So I've chosen a solution closer to XState, at the expense of some wasted rerenders in React.

Originally posted by @Andarist in https://github.com/statelyai/xstate-viz/pull/214#discussion_r696607144

davidkpiano avatar Aug 27 '21 18:08 davidkpiano