Error: cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. in ReactNotification...

[cptPIKARD]

Simetimes I have this warning message (screenshot link below)

https://prnt.sc/pew4j6

I really don't understand why. Maybe it is bug from this plugin (react-notifications-component). My component is:

class Notifications extends PureComponent {
  notesId = [];

  componentDidMount() {
    this.props.initTrainIncidentNotesWsChannel();
  }

  componentWillUnmount() {
    this.props.closeTrainIncidentNotesWsChannel();
    this.clearAllNotes();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.note && nextProps.note.size && nextProps.note !== this.props.note) {
      this.show(nextProps.note);
    }
  }

  clearAllNotes = () => {
    if (this.notesId.length) {
      this.notesId.forEach(id => {
        store.removeNotification(id);
      });
    }
  };

  show = (note = Map()) => {
    const id = store.addNotification({
      title: note.get('message', ''),
      message: note.getIn(['note', 'description'], ''),
      type: 'success',
      insert: 'top',
      container: 'top-right',
      animationIn: ['swing-in-top-fwd'],
      animationOut: ['swing-out-top-bck'],
      dismiss: {
        duration: 5000,
        pauseOnHover: true,
        onScreen: true,
      },
    });
    this.notesId.push(id);
  };

  render() {
    return <ReactNotification />;
  }
}

[Droow]

Same problem here. My component looks like this:

import React, { useEffect } from 'react';
import ReactNotification from 'react-notifications-component';

function AdminSection(...) {
   ...
   return (
    <Wrapper width={1600}>
      <ReactNotification />
      ...
    </Wrapper>
   );
}

So i guess it really is a bug inside the react-notifications-component.

[Droow]

Ok I think I got it. There was event listener which was not unsubscribed on component unmount. I just posted a pull request that should fix it.