How to Get the Height of an Element After Render in React

To get the height of a React element after render in React, we can combine two hooks: useRef() and useEffect():

import React, { useEffect, useState, useRef } from 'react';

function ExampleComponent() {
  const [height, setHeight] = useState(0);
  const elementRef = useRef(null);

  useEffect(() => {
    setHeight(elementRef.current.offsetHeight);
  }, []);

  return (
    <div ref={elementRef}>
      {`The height of this element is: ${height}px`}
    </div>
  );
}

useEffect() runs after the component mounts or re-renders, unlike useLayoutEffect() that runs before. They both have a dependencies array that cause them to fire when any of those dependencies change.

We create a ref for the target element with useRef(), and assign it to its ref prop, so we can access the HTMLElement object for this React element.

useRef returns a mutable ref object that doesn’t change its value when a component is updated. Also, modifying the value of this object’s current property does not cause a re-render. This is in contrast to the setState update function returned from useState.

We do use useState() to create a state that we update when useEffect() gets called. This update causes the component to update again from useEffect().

To get the actual height, we use the offsetHeight property, which includes borders, padding, and any scrollbars when calculating the element’s height.

It’s also possible to get the height of the entire window in React, instead of just one element.

Get height of element with `clientHeight`

clientHeight is another way to get the height of an element. Unlike offsetHeight, it includes padding but excludes borders and scrollbars.

import React, { useRef, useLayoutEffect, useState } from 'react';

function ExampleComponent() {
  const [height, setHeight] = useState(0);
  const elementRef = useRef(null);

  useEffect(() => {
    setHeight(elementRef.current.clientHeight);
  }, []);

  return (
    <div ref={elementRef}>
      {`The height of this element is: ${height}px`}
      <p>This element's height is measured using clientHeight.</p>
    </div>
  );
}

Get height of element after render and on resize in React

To get the height of an element after render and on resize:

Combine the useEffect() and useRef() hooks to get the element’s height before it renders.
Track the current height with state.
Add a resize event listener to the window object in useEffect().
In the event listener, get the new height of the element, and update the state with it.

import React, { useLayoutEffect, useState, useRef } from 'react';

function ExampleComponent() {
  const [height, setHeight] = useState(0);
  const elementRef = useRef(null);

  useEffect(() => {
    const handleResize = () => {
      setHeight(elementRef.current.offsetHeight);
    };
    handleResize();
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    }
  }, []);

  return (
    <div ref={elementRef}>
      {`The height of this element is: ${height}px`}
    </div>
  );
}

We call addEventListener() in useEffect() to set the resize event listener on the element before it renders on the screen.

The resize event listener is called whenever the user resizes the window. In the listener, we update the state that stores the element’s height, and this causes a re-render.

We call removeEventListener() in useEffect‘s clean-up function to stop listening for resize events when the component is unmounted or when the dependencies change to prevent memory leaks and unintended side effects.

Get height of element before render in React

To get the height of an element before render in React, we can combine two React hooks: useRef and useLayoutEffect.

import React, { useRef, useLayoutEffect, useState } from 'react';

function ExampleComponent() {
  const [height, setHeight] = useState(0);
  const elementRef = useRef(null);

  useLayoutEffect(() => {
    setHeight(elementRef.current.offsetHeight);
  }, [height]);

  return (
    <div ref={elementRef}>
      {`The height of this element is: ${height}px`}
    </div>
  );
}

So the difference between “before render” and “after render” is useLayoutEffect() and useEffect().

useLayoutEffect() works just like useEffect(), but the key difference is that it fires before the browser repaints the screen – before React renders the component.

Here we create a ref for the target element with useRef(), and assign it to its ref prop, so we can access the HTMLElement object for this React element.

We do use useState() though, to create a state that we update when useLayoutEffect() gets called. So calling setHeight() will cause the component to be re-rendered.

To get the actual height, we use the offsetHeight property which includes borders, padding, and any scrollbars when calculating the element’s height.

Get height of element before render and on resize in React

To get the height of an element before render and also on resize:

Combine the useLayoutEffect() and useRef() hooks to get the element’s height before it renders.
Track the current height with state.
Add a resize event listener to the window object in useLayoutEffect().
In the event listener, get the new height of the element, and update the state with it.

import React, { useLayoutEffect, useState, useRef } from 'react';

function ExampleComponent() {
  const [height, setHeight] = useState(0);
  const elementRef = useRef(null);

  useLayoutEffect(() => {
    const handleResize = () => {
      setHeight(elementRef.current.offsetHeight);
    };
    handleResize();
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    }
  }, []);

  return (
    <div ref={elementRef}>
      {`The height of this element is: ${height}px`}
    </div>
  );
}

We call addEventListener() in useLayoutEffect() to set the resize event listener on the element before it renders on the screen.

The resize event listener is called whenever the user resizes the window. In the listener, we update the state that stores the element’s height, and this causes a re-render.

We call removeEventListener() in useLayoutEffect‘s clean-up function, to stop listening for resize events when the component is unmounted or when the dependencies change, to prevent memory leaks and unintended side effects.

Key takeaways

To get the height of a React element after render, we can use the useRef() and useEffect() hooks.
The offsetHeight property includes borders, padding, and scrollbars, while clientHeight includes padding only.
To get the height of an element after render and on resize, we can use the useLayoutEffect() hook and add a resize event listener to the window object.
To get the height of an element before render, we can use useLayoutEffect() instead of useEffect().

Every Crazy Thing JavaScript Does

A captivating guide to the subtle caveats and lesser-known parts of JavaScript.

Get height of element with clientHeight