Graph reloading when hovering the menu about react-force-graph

[vasturiano]

@uhessbai essentially you should try to keep your data object memoized, i.e. its reference doesn't change from one render to the next. This is regardless of whether it belongs to the force graph component or its parent component. At the time that it is created it should not be regenerated at every render, unless needed.

[vasturiano]

@uhessbai thanks for reaching out. It's more practical if you submit an online example on https://codesandbox.io/. However in your case most likely this is happening because you're not memoizing the functions that you're passing to the component, for instance:

nodeVal={node => 100 / (node.level * node.level + 1)}

Therefore at every rerender the component receives a new function and needs to recompute every node position and re-heat the layout.

Same thing might be true with your data prop if it's a new reference each time (that part of the code is not present above).

[uhessbai]

@vasturiano thanks for your reply ! I will come back in a few days at home, I will try that soon :)

[uhessbai]

Ok so i tried some things, for nodeVal i can use a static value which works ! As adviced i also put the code on codesanbox (config is not on point tho) at this link

But for "data" its another kind of issue : my problem is that my app component hosts the drawer and the forcetree, and the info goes from one component to the other to help the highlight of nodes and i dont know if i there is a way to solve this issue, i tried by myself and with the help of ai but my knowledge of react seems not clear enough because even though i tried multiple things i was going around in circles

Could you bring more details about your clue on this issue ?

Also our answer greatly helped me to better understand how the layout works, thanks for that too !

[uhessbai]

@vasturiano thank you very much ! I will try that soon, i'll post the solution there if it might help someone!

[itsPreto]

Wow this thread was super helpful! I was struggling with an issue when highlighting linked nodes in a large graph where my fps would drop to 1 while hovering and it turned out these types to memoize the graphData and now it runs super smoothly!

@vasturiano if interested I can put up a PR for a large-graph/highlighting/performance example

[uhessbai]

@vasturiano it works perfectly! thanks for your help! I can post the code if someone needs it