Lag when used in NextJs

[timothygachengo]

1. When using the autoFill option, the marquee freezes up the page where the marquee is located when using NextJs 13.

[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:

https://github.com/justin-chu/react-fast-marquee/blob/8b4bf8b4b69d530068f7a30658500a50d2de7379/src/components/Marquee.tsx#L189-L191

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: https://github.com/justin-chu/react-fast-marquee/issues/66#issuecomment-1575052529

[jomarmontuya]

I've encountered the same issues I totally drop this library and just use this instead as alternative -> https://ui.aceternity.com/components/infinite-moving-cards

[gregsadetsky]

seeing this now when using autoFill in a React app - when set to true, it create ~38k nodes/copies of the scrolled element

thanks to @wayneslabs for pointing out the answer: "wrap the Marquee in a div and bound its width to say 500px"

it'd be great to have a check (when autoFill=true) to not create more than... 100? copies of the contents.