Lag when used in NextJs about react-fast-marquee

[thisispaul]

Same issue and it actually just seems to completely freeze the page.

[timothygachengo]

I tried that and it still doesn't work.

[thisispaul]

I tried that and it still doesn't work.

yeah i deleted my comment as it seemed to work but then actually just broke again. sorry for confusion.

[thisispaul]

I had a quick look at the code and ran some tests and it looks like the issue is here:

react-fast-marquee/src/components/Marquee.tsx

Lines 189 to 191 in 8b4bf8b

	const resizeObserver = new ResizeObserver(() => calculateWidth());
	resizeObserver.observe(containerRef.current);
	resizeObserver.observe(marqueeRef.current);

This calculateWidth is being called over and over again. Each time it doubles the multiplier.

I'm guessing this is because its adding new copies which changes the width and then the resize observer is called. This ends up creating thousands of copies which grinds the page to a halt.

[thisispaul]

@timothygachengo I fixed it locally by cloning the poackage and changing that whole resize observer this

  // Calculate width and multiplier on mount and on window resize
  useEffect(() => {
    if (!isMounted) return;
    calculateWidth();
    window.addEventListener("resize", calculateWidth);
    return () => window.removeEventListener("resize", calculateWidth);
  }, [calculateWidth, containerRef, isMounted]);

It's not as ideal as the original code as it will call calculateWidth more but it doesn't have the same issue of infinitely calling itself and breaking the page.

[wayneslabs]

I'm not sure if it works for nextjs, but you can try the answer described here: #66 (comment)