state update on an unmounted component

[kYem]

The usual

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 the componentWillUnmount method.

Strack trace

warningWithoutStack @   react-dom.development.js:506
warnAboutUpdateOnUnmounted  @   react-dom.development.js:18271
scheduleWork    @   react-dom.development.js:19681
enqueueSetState @   react-dom.development.js:11141
Component.setState  @   react.development.js:335
setFlickityToReady  @   index.js:95
proto.emitEvent @   ev-emitter.js:99
ImagesLoaded.complete   @   imagesloaded.js:249
ImagesLoaded.check  @   imagesloaded.js:210
setTimeout (async)      
ImagesLoaded    @   imagesloaded.js:117
ImagesLoaded    @   imagesloaded.js:83
componentDidMount   @   index.js:100
commitLifeCycles    @   react-dom.development.js:17130
commitAllLifeCycles @   react-dom.development.js:18532
callCallback    @   react-dom.development.js:149
invokeGuardedCallbackDev    @   react-dom.development.js:199
invokeGuardedCallback   @   react-dom.development.js:256
commitRoot  @   react-dom.development.js:18744

setFlickityToReady needs to make sure component is still mounted

[rafaelcorreiapoli]

Im also having this issue

[yaodingyd]

Can you create a reduced test case in codesandbox?

[guille-alibrate]

It's still happening. You can check it using your own demo:

See: https://codesandbox.io/s/qlz12m4oj6

Just change the library version from 3.2.0 to 3.4.0. And check the (chrome) console.

https://codesandbox.io/s/react-flickity-94qi9

Apparently, it's working with 3.3.2, so I'll stick to it.

[howells]

Has anyone been able to fix this?

[yaodingyd]

Have you try the latest version? you need to install flickty as peer dependency

[nullhook]

This error occurred to me when I didn't cleanup a listener after unmount. The fix is to unbind any events you're registering on unmount.

React.useEffect(() => {
    const listener = () => {
      const text = flkty.current.selectedElement.getAttribute('data-caption');
      setCaption(text);
    };

    flkty.current.on('select', listener);

    return () => flkty.current.off('select', listener);
}, []);

[howells]

@nullhook ah! I didn't consider that because I was using the on attribute as part of Flickity options, so I've reconfigured it and I don't seem to be getting the error anymore. Thank you.

[brandondurham]

Unsubscribing listeners didn’t do the trick for me. I actually removed them altogether and still get the warning in my tests, and occasionally in the browser.

[haase1020]

I am not sure why this case is closed... I am still running into the same issue even though I am cleaning up the listener in my useEffect after unmounting. Any suggestions on how to troubleshoot?

[nullhook]

ensure you're component is properly unmounted - try logging from the unmount function and see if it triggers on unmount. also, it depends on how you're defining flickityRef - ensure the local reference to the Flickity component isn't null.