Getting the coordinates of an element in React?

Question

React

Let's say we have a component:

import React, {useState} from 'react' 
let Block = () => {
     let [coors, setCoors] = useState(null) 
     return (
          <div>Hello World </div>
) 
}

I can add a click event to the div and it will return the event object in which I can get the getBoundingClientRect property.
But how can I get and store the coordinates of this element in coors during the function call without any events?

Answer 1

use ref and in componentDidMount()or useEffect()refer toref.current

const ref = useRef();

useEffect(() => {
  const rect = ref.current.getBoundingClientRect();
});

return <div ref={ref} />;