useLayoutEffect

A version of useEffect that fires synchronously before the browser repaints the screen. Use it to read layout from the DOM and synchronously re-render before the user sees the visual update.

Note: Has the exact same signature as useEffect (accepts a dependency array and returns a cleanup function).

import { useRef, useLayoutEffect } from 'react';

export const Component = () => {
    const boxRef = useRef(null);

    useLayoutEffect(() => {
        const width = boxRef.current?.offsetWidth;
        // Update UI before render...
    }, []);

    // ...
};