React - Render component based on the position of other components - reactjs

Question

I want to draw a line between two boxes. So I have two components for the boxes, and I want a third component to render as a line between these two components. I don't know the positions and dimensions of the two boxes until they have completed rendering, since it will depend on the rendering of other components. In order to draw the line, I need the position of both boxes relative to a common parent element. (The line is drawn with absolute positioning though, so will not affect the boxes.)
So the question is, how do I do this in React? If I understand React correctly, information is passed downwards in the tree, but can flow upwards through callbacks. But the components just pass react elements off to the framework and the actual rendering happens in the background. So how do I access the result of rendering, e.g. the final coordinates of the DOM element?
Furthermore, if I pass this information (the coordinates of the boxes) upwards to a common ancestor and store it in state, don't I risk an infinite loop where updating these coordinates will cause the components to render again?
(I'm using function components if that matters.)
Edit: I'm not asking for a graph-rending library or anything like that. The boxes and line is just an example. I'm asking how to have a React component render based on the DOM coordinates of other rendered React components.

Answer 1

You could use the useRef hook:
import {useRef, useLayoutEffect} from 'react'
const Page = () => {
const componentRef = useRef()
useLayoutEffect(()=> {
console.log(componentRef.current.clientHeight). // height of ref element
console.log(componentRef.current.clientWidth) // width of ref element
console.log(componentRef.current.offsetTop). // px to top of window from ref element
console.log(componentRef.current.offsetLeft) // px to left of window from ref element
)}
return (
<div ref={componentRef}>
Component
</div>
)
}
with offsetTop and offsetLeft you can get the position since offsetTop = y axis and offsetLeft = x axis