Measuring DOM Nodes with useLayoutEffect

Snippet

Measuring DOM Nodes with useLayoutEffect

useLayoutEffect fires synchronously after all DOM mutations but before the browser has a chance to paint. It is used to read layout from the DOM and synchronously re-render to avoid visual flickering.

snippet.js
javascript
import { useState, useLayoutEffect, useRef } from 'react';
 
function Tooltip() {
  const [width, setWidth] = useState(0);
  const elRef = useRef();
 
  useLayoutEffect(() => {
    setWidth(elRef.current.getBoundingClientRect().width);
  }, []);
 
  return <div ref={elRef}>Width: {width}px</div>;
}

react

Breakdown

useLayoutEffect(() => { ... }, []);

Runs before the screen is painted, allowing for synchronous layout adjustments.

elRef.current.getBoundingClientRect().width

Reads the precise physical dimensions of the element from the browser.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Measuring DOM Nodes with useLayoutEffect

Related