Implement native GoJs in a React Web App

GoJS
1

Hi again, is there a way to fully implement GoJs natively in a React Web App and avoid using ReactDiagram & ReactPalette?

Stale data in functions is a HUGE issue. It’d be great to avoid having to deal with React Render cycles and stick to Native JavaScript.

Thank you!

2

I’m not sure what you’re referring to with stale data; that sounds like you haven’t implemented listeners to keep your state synchronized with the GoJS model.

If you’re interested in how gojs-react is implemented, you can see here: gojs-react/IMPLEMENTATION.md at master · NorthwoodsSoftware/gojs-react · GitHub

Anyway, you can of course use GoJS without the gojs-react package. Just set up a div and associate a Diagram with it as you would in a normal HTML/Javascript environment, typically by referencing the div ID. It will then be up to you to make all updates to the GoJS model.

3

I have all my event listeners configured.

Stale state in functions is a common React issue. My data source changes based on user GoJs interaction but this modified data source did not exist when ReactDiagram initially rendered therefore, my function event handlers never get access to this data later on UNLESS I manually force ReactDiagram to re-render.

ReactDiagram and ReactPalette DO NOT reload function callbacks defined on initPalette={useGoJsInitPalette} and initDiagram={useGoJsInitDiagram(diagramEventHandlers)}

Therefore, I get Stale (outdated) state in this functions when executed by user actions

4

I replied in the other thread.

The init functions are only called on mount, so you should not really on any state/props in those functions.

1 Like