When using D3 in React, should I use useRef, or directly select an element by tag/class/Id with D3?

Question

<div ref={svgRef} className="App"></div>

For this given div which method is best

a)

const svg = d3.select('.App')
      .append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', width + margin.top + margin.bottom);

b)

const svgRef = useRef();
const svg = d3.select(svgRef.current)
      .append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', width + margin.top + margin.bottom);

Answer 1

Both approaches work, but the first one is more error prone since D3 can accidentally interact with unrelated components, such as when other components have elements with the same class being selected.

The useRef approach guarantees the correct selection, so it should be preferred when possible.