const { useState, useRef, useCallback, useEffect } = React;

const useResizeObserver = (callback, elements) => {
  useEffect(() => {
    const resizeObserver = new ResizeObserver((entries) => {
      callback(entries);
    });

    for (const elem of elements) {
      elem.current && resizeObserver.observe(elem.current);
    }

    return () => resizeObserver.disconnect();
  }, []);
};

const App = () => {
  const [width, setWidth] = useState(0);

  const element = useRef(null);

  const handleResize = (entries) => {
    const width = entries[0].contentRect.width;
    setWidth(Math.floor(width));
  };

  useResizeObserver(handleResize, [element]);

  const style = {
    backgroundColor: "red",
    height: "40vmin",
    width: "40vmin"
  };

  return (
    <div className="App">
      <div ref={element} style={style}>
        {width}px
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));