I'm on a situation where I want to make some dom-node size calculations (top, bottom and size properties of the rendered DOM node)

What I'm doing right now, on the componentDidUpdate method is to call findDOMNode on this:

 componentDidUpdate() {

        var node = ReactDOM.findDOMNode(this);



        this.elementBox = node.getBoundingClientRect();

        this.elementHeight = node.clientHeight;

        // Make calculations and stuff

}

This is working fine, but I'm a bit worried about performance, and react best practices. Several places talks about using ref property instead of findDOMNode, but all of them are for child dom elements, on my case I only want the root DOM node of my component.

The alternative using ref may look like this:

render(){

   return (

            <section // container

                ref={(n) => this.node = n}>

                 // Stuff

            </section>

}

 componentDidUpdate() {



        this.elementBox = this.node.getBoundingClientRect();

        this.elementHeight = this.node.clientHeight;

        // Make calculations and stuff

}

To be honest, attaching a ref callback to my root dom node just to get it's reference does not feel correct to me.

What is considered the best practice on this case ? Which one has better performance ?