Don't paint before measurements are taken

[Sun-2]

On the first render, bounds is obviously filled with 0's.

Is it possible for the 2nd render, with the bounds object filled properly, to happen before the browser paints?

For example, given you want to sync two div's height, the following implementation (with react-use-measure) lets the browser paint after the first render, where the height is 0. Only the second render the synced div jumps to its correct height, which results in a flash.

function Component() {

  const [ref, bounds] = useMeasure();

  return (
    <>
      <div
        ref={ref}
        style={{ backgroundColor: "red", width: "200px", height: "200px" }}
      />
      <div
        style={{
          backgroundColor: "blue",
          width: "200px",
          height: `${bounds.width}px`
        }}
      />
    </>
  );
}

A component like this one, without react-use-measure works just fine, without the flash (properly).

function Component() {
  const ref = useRef<any>();
  const [height, setHeight] = useState(0);

  useLayoutEffect(() => {
    const ro = new ResizeObserver(([entry], observer) => {
      console.log(entry.contentRect);
      setHeight(entry.contentRect.height);
    })
    ro.observe(ref.current!);
    return () => ro.disconnect();
  }, []);
  return (
    <>
      <div
        ref={ref}
        style={{ backgroundColor: "red", width: "200px", height: "200px" }}
      />
      <div
        style={{
          backgroundColor: "blue",
          width: "200px",
          height: `${height}px`
        }}
      />
    </>
  );
}

[samselikoff]

Agree – I think this could at least be a config option!