[zappo2938]

I can't imagine d3 being performant with dynamic data input when all the d3 code inside the useEffect() is rerun over and over again. Also, how do you handle the data flow with events such as tracking mouse movements and sharing that event data between d3 and react?

I wonder if is better to have the d3 function inside of useCallback() and pass data as a parameter where the function isn't re evaluated rather than in useEffect where the function is run from the top again?

[uhoh-itsmaciek]

I think this is partly why Amelia suggests rewriting these examples to let React handle the rendering and avoid DOM manipulation in D3. I rewrote a bunch of charting components at work a while ago, and that general approach worked really well for us. In fact, I barely ended up using d3 at all, but the bits that I did use were very handy. I found some of Amelia's other writing very useful in the process, and I blogged about what I learned [1] (for what it's worth, I do talk a bit about handling mouse interactions there).

This is really the central point:

>The crux of the issue is that they both want to handle the DOM.

If you want to use D3 and React together, you need to figure out how to handle this, and there are several reasonable ways to do that. Letting React handle rendering is a natural approach, and works especially well if you are embedding your SVG components in an existing React application.

But the "hand a ref off to D3 and keep React out of that element" approach can also work, especially if you are more familiar with D3 DOM manipulation already.

[1]: https://pganalyze.com/blog/building-svg-components-in-react

[zappo2938]

Especially if the developer is building with React Native which doesn't have canvas or svg natively but rather requires a shim for svg. I'm starting a desktop project with lots of data and I'm currently making some architecture decisions. I'm trying to answer what is the fastest path to MVP without getting locked with tech debt? These posts have been helpful.

[knuthsat]

Given that all of the code uses React.FC instead of React.PureComponent or regular React.Component the efficiency obviously lacks, there's no props diffing and everything will be rerendered.