Recoil memory leak with unmounted component?

gknapp commented 3 years ago

Describe the bug I'm seeing warnings in the console. Application behaviour appears unaffected.

My app renders a carousel with scroll buttons if the header width becomes too cramped. If the user expands the browser window wide enough, the whole list of items is rendered instead (i.e. no carousel).

When the carousel is rendered the following console warnings appear:

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. in Ne (created by RecoilRoot) in RecoilRoot in Unknown (at Carousel.tsx:70)

Warning: Cannot update a component (Ne) while rendering a different component (un). To locate the bad setState() call inside un, follow the stack trace as described in https://fb.me/setstate-in-render in un in un (created by i) in i (created by i) in i (created by ForwardRef(withResizeDetector(undefined))) in ForwardRef(withResizeDetector(undefined)) (created by hn) in hn in RecoilRoot in Unknown (at Carousel.tsx:70)

To Reproduce Another user on stackoverflow has experienced this issue, with example code: https://stackoverflow.com/questions/63632304/i-have-error-cannot-update-a-component-ne-while-rendering-a-different-compo

Expected behavior No console warnings.

Environment

  System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 Intel(R) Core(TM) i9-9900 CPU @ 3.10GHz
    Memory: 17.32 GB / 31.79 GB
  Binaries:
    Node: 12.20.1 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 87.0.4280.88
    Edge: Spartan (44.19041.423.0), Chromium (87.0.664.66)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    @brainhubeu/react-carousel: 2.0.1 => 2.0.1

This is on desktop Chrome (version above)

Additional context Add any other context about the problem here.