react-force-graph
react-force-graph copied to clipboard
vasturiano
The DOM keeps on Re Rendering
Describe the bug The nodes keep on rendering and im dynamically trying to load images which is causing console to show 404 error . and even when I log my node via console.log(node) its goes into infinite loop here the hook under path pages>HomePage>Map>hooks>UseNodeCanvasObject.ts>drawNodeCanvasObject
To Reproduce Steps to reproduce the behavior: clone this repo https://github.com/mapofzones/map-of-zones-web yarn install yarn start
Expected behavior Can we stop this un necessary re rendering here ?
Screenshots
Desktop (please complete the following information):
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
Smartphone (please complete the following information):
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
Additional context
@vaibhav-systango it's preferable if you create a lean example focused on your issue on https://codesandbox.io/ , for easiness of troubleshooting.
I'm assuming you're using the 2D mode of the force graph. This uses a canvas element which needs to be redrawn at every frame where there's a motion in nodes positions. Thus at every frame, it will invoke your custom nodeCanvasObject method for every node. This is by design.
What you should do is make sure you keep this method as lean as possible, because it is invoked so frequently. If there are parts of it which can be abstracted out and pre fetched you should do so, like pulling images, so you don't have to do it every time.
alright i'll check but as of now even if im not changing anything in node positions still even if the UI is still I see infinite times this custom hook gets called incase if yiou can help me it will be great ! yes i'm using 2D only @vasturiano
If you have autoPauseRedraw: true, then the rerendering will pause once the force engine cools down (by default after 15s).
If you're seeing something different, it's better if you make an example.