Memory leak

[sjc5]

I'm getting react memory leak warnings on the latest version: "react-render-if-visible": "^2.1.1"

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Perhaps window.cancelIdleCallback() needs to be returned as a cleanup somewhere. Will see if I can do some investigation here but wanted to report right away.

[drummerjolev]

Same here – though this is an incredible small package. Thanks so much @samsargent for creating this, after spending 2 days trying to make react-window work, this is a much cleaner solution that works for me.

[samsargent]

Same here – though this is an incredible small package. Thanks so much @samsargent for creating this, after spending 2 days trying to make react-window work, this is a much cleaner solution that works for me.

Thanks! But I can't take any credit, this was all @GusRuss89.

[vltansky]

maybe cleanup requestIdleCallback ?

useEffect(() => {
    let idleCallbackId: number | null = null;

    if (intersectionRef.current) {
      const localRef = intersectionRef.current;

      const observer = new IntersectionObserver(
        (entries) => {
          // Before switching off `isVisible`, set the height of the placeholder
          if (!entries[0].isIntersecting) {
            placeholderHeight.current = localRef!.offsetHeight;
          }

          if (typeof window !== 'undefined' && window.requestIdleCallback) {
            idleCallbackId = window.requestIdleCallback(() => {
              setIsVisible(entries[0].isIntersecting);
            }, {
              timeout: 600,
            });
          } else {
            setIsVisible(entries[0].isIntersecting);
          }
        },
        { root, rootMargin: `${visibleOffset}px 0px ${visibleOffset}px 0px` }
      );

      observer.observe(localRef);

      return () => {
        if (localRef) {
          observer.unobserve(localRef);
        }
        if (idleCallbackId !== null && typeof window !== 'undefined' && window.cancelIdleCallback) {
          window.cancelIdleCallback(idleCallbackId);
        }
      };
    }
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    return () => {};
  }, []);