Canovice
Canovice

Reputation: 10173

Error: ResizeObserver loop completed with undelivered notifications in React

function HomePageVideoPlayer() {

    const containerRef = useRef(null);
    const [containerWidth, setContainerWidth] = useState(0);

    // get container width to make video take up full size of container with 16:9 aspect ratio
    useEffect(() => {
        const observer = new ResizeObserver(entries => {
            for (let entry of entries) {
                const { width } = entry.contentRect;
                const maxWidth = Math.min(Math.floor(window.innerHeight * 16 / 9) - 120, 980);
                const newWidth = Math.min(maxWidth, width);
                setContainerWidth(newWidth);
            }
        });

        // start observing the container element for size changes.
        if (containerRef.current) {
            observer.observe(containerRef.current);
        }

        // cleanup by disconnecting the observer when the component unmounts.
        return () => observer.disconnect();
    }, []);

    // and return
    return (
        <HomePageSectionWrapper>
            <div ref={containerRef}>
                <ReactPlayer
                    url={ourVideoUrl}
                    width={containerWidth}
                    height={containerWidth * 9 / 16}
                    controls
                />
            </div>
        </HomePageSectionWrapper>
    );
}

export default HomePageVideoPlayer;

This code is meant to set a containerWidth variable for a <ReactPlayer component that shows a video. However, many of our users are getting a Error: ResizeObserver loop completed with undelivered notifications error from this addition (even though I am not able to reproduce the issue locally on my end). What could be causing this issue, and how could we go about improving the code to resolve this issue?

As an aside, the whole purpose of the useEffect and the containerWidth variable being set in this manner is so that we can set the ReactPlayer to a fixed pixel width (as opposed to %, or vw) for home page load performance, but I am beginning to think we would simply be better off setting the width to some percentage width of the parent container instead...

Upvotes: 0

Views: 706

Answers (0)

Related Questions