Sometimes web developers need to access the height of DOM elements in React.

In this article, we will show the most readable and efficient way to do this while following best practices of React.

Get height of an element in React

There are three essential steps to get the height of DOM element in React.

  1. Create a ref to store a reference to the DOM element.
  2. Access the height of DOM element on ref.current.offsetHeight
  3. Use a lifecycle hook componentDidMount() or useEffect() hook to get the height of element after it is rendered and store height in the state.

Let’s look at the code example of basic implementation and try to break down what’s going on in the code:

First, we create a ref to access DOM element in React.

We create a container variable and set it equal to an empty ref (useRef(null)). Then we set the ref attribute of the element we want to reference. In this case, that element is <div>.

Then we create a state variable to store the element height after it is rendered.

Finally, we pass the callback function to useEffect() hook. This function performs a side effect (called ‘effect’ for short) every time the component mounts, because second argument to the useEffect() hook is an empty dependency array.  

The effect (callback function) sets the height state variable to the container.current.offsetHeight value. Remember, container is name of the ref tied to the <div> element.

We can’t access the height of element before it renders. That’s why It’s important use an effect (callback function passed to the useEffect() hook) which runs after the component mounts.

Get height of an element in React class components

In principle, getting the height of an element in class components is pretty similar to previous example.

However, you can not use hooks in class components, which means that:

  1. We need to use the createRef() method instead of the useRef() hook.
  2. Instead of useEffect() hook, we need to use componentDidMount() lifecycle method.
  3. We need to initialize the state and use the setState() method to update it.
export default class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { height: null };
  }
  container = createRef(null);
  componentDidMount() {
    this.setState({ height: this.container.current.offsetHeight });
  }

  render() {
    return (
      <div className="App" ref={this.container}>
        {this.state.height}
      </div>
    );
  }
}

Note that in class components, we need to use the this keyword to access class properties.

Get height of element after render

We can only get element’s height after it’s rendered. We need to use lifecycle methods or the useEffect() hook to execute a side-effect after component is mounts.

In class components, you can simply use componentDidMount() to set state property to ref.current.offsetHeight value.

Needless to say, you also need to create a ref and initialize a state object.

export default class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { height: null };
  }
  container = createRef(null);
  componentDidMount() {
    this.setState({ height: this.container.current.offsetHeight });
  }
  render() {
    return (
      <div className="App" ref={this.container}>
        {this.state.height}
      </div>
    );
  }
}

In functional components, normally you’d use the useEffect() hook to perform side effects. However, when it concerns component layout, it’s best to use useLayoutEffect() instead.

export default function App() {
  let container = useRef(null);
  let [height, setHeight] = useState(null);
  useLayoutEffect(() => setHeight(container.current.offsetHeight), []);
  return (
    <div className="App" ref={container}>
      {height}
    </div>
  );
}

Note that in functional components, we use the useRef() hook to create a ref, and useState() to initialize a state variable to store the height of an element.

useLayoutEffect(), like useEffect(), accepts two arguments. First is a callback function that performs a side effect. In this example, it calls the setHeight() function to update the height state variable.

Second argument is the dependency array, where every item is a state variable. Any time these variables change, React will run the side-effect.

You can also pass an empty dependency array. In this case, the side-effect will run only when the component mounts.

That’s how you can get the height of element after render in React.

Get height of parent element

Once you have a ref that is tied to an element, you can access the parentElement property to get information about its parent element.

Let’s get back to our previous example.

Our ref is named container. We need to access container.current.parentElement.offsetHeight to get the height of its parent.

We have a state variable – parentHeight – to store the height of a parent element. Then we use the useEffect() hook to set parentHeight to container.current.parentElement.offsetHeight value.

offsetHeight vs clientHeight

So far, we only used offsetHeight to find height of an element in React. There’s also a clientHeight property, which also shows element height.

Difference between two is that offsetHeight value shows element height including internal content, padding and borders. On the other hand, clientHeight property shows element’s inner height, including padding. It does not, however, include border values.

In our previous examples, we used offsetHeight. Containers themselves had heights of 200 and 500 pixels, but offsetHeight also included 2px height of top and bottom borders. That’s why live demo showed 204 and 504 pixels.

UI Libraries