you could just use componentDidMount for the d3 rendering trigger, since the rendering should be done on the React part, at this moment. But that's just hypothetical since I did not test it. or you could use https://github.com/esbullington/react-d3 as an example and read the code to understand it.

I guess in the end since both are seperated renderers you just need to control the update live cycle so d3 does not render on every state or props change that has nothing to do with d3.

I used D3 and React together in 2 previous projects. D3 is nothing more than just a data-to-svg rendering lib with some interaction support. Basically, the way u use D3 and React together depends on what kinds of visualization you are building.

For most of the visualization, they works perfectly well together in two ways -

1. Using original D3 API (e.g. select) inside componentDidMount() via DOM ref.
2. A better solution: Write your own svg tag rendering code and only use the data processing part of D3. This allows u to write D3 in the React style and give its control to React.

BUT!!!!!!!!!!!!!!!!!!!!!!!!!!!!! For option 2, if you would like to make something that requires Click/Hover/Pan and Zoom, you have to write your own event listener and zooming logic (I did it).

For both options, if you would like to make something that requires Drag and Drop, sorry, you cannot use D3 together with React because the way D3 manipulate dragging objects conflicts with React.

I have not used D3. Any library which manipulates DOM should be done after componentDidMount and componentDidUpdate. Because React uses virtual DOM, DOM changes should be limited.