How do I integrate visx realtime updating graphs with React JS without re-render of component?

[zkbitcoin]

similar question was asked for Plottly (with the answer that an update method used for that)

I guess maybe better title/question would be best practices for visx and dynamic data (without re-ender)

How do I integrate Plotly realtime updating graphs with React JS without rerender of component

[williaster]

Hi @zkbitcoin 👋 thanks for checking out visx. I'm converting this to a discussion since it's more of a usage question than an issue.

Compared to other react charting libraries that use d3 and let d3 update the DOM directly, visx uses d3 only for math and handles all DOM rendering on its own. Because of react's virtual DOM, this can lead to perf issues when components/nodes are updated in quick succession such as animation.

While visx is not opinionated on which animation library you use (it's compatible with them all since it's just react), in our single "higher-level chart" package @visx/xychart we have chosen to use react-spring for animations/updates because of it's superior performance. It uses animated components under the hood which bypass react's lifecycle methods and virtual DOM update algorithm which can lead to perf problems.

Hope that helps.

[zkbitcoin]

any plans to somehow "extend" visx library with real time capability ? I guess that would depend on the react spring wrapper in my sample app, price chart gets rendered every minute or so so with panel refresh its not like super duper user experience, but I did choose visx exactly for the reasons that is light and fast ..(also time to market) its actually an awesome lib, super fast to create charts,, if it somehow could be made to real time charing software ... but yes thanks for this great reply.. I am thinking if one really wants to customize one creates own wrapper around d3 and use d3 direct , but thats recreating yet another library