brainhubeu / react-carousel

A pure extendable React carousel, powered by Brainhub (craftsmen who ❤️ JS)

Home Page:https://brainhub.eu/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Recoil memory leak with unmounted component?

gknapp opened this issue · comments

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.

I'm getting this warning as well. It's happening when react-dom is 16.13.0 or higher.

Getting the same warning

me too!

Same warning, also on react 16

Same here!

Same issue here with react 17.0.1. My production build stops working because of this problem.

Same issue here as well. Using react and react-dom 16.14.0. In production, this error takes down my app. Any suggested fix would be much appreciated.

Having problems with this aswell

Same issue here