How to clean up with useEffect (Warning: Can't perform a React state update on an unmounted component.)

What is the proper way to clean up via useEffect after switching page?

import React, { useEffect } from 'react'
import { ToastContainer, toast, Flip } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
import { css } from 'glamor'

export default function Toast() {
  const goal = toast(<ToastText />, {
    toastId: 'goal',
    className: css({
      position: 'absolute',
      top: '80px',
      boxShadow: 'none',
      left: '0px',
      background: 'rgba(46, 139, 87, 0.9)',
      width: '100vw',
    }),
    bodyClassName: css({
      color: 'white',
      fontSize: '30px',
    }),
    progressClassName: css({
      background: 'white',
      height: '2px',
    }),
  })

  console.log(toast.isActive(goal))
  useEffect(() => {
    return () => toast.dismiss()
  }, [])

  return (
    toast.isActive(goal) || (
      <ToastContainer
        autoClose={5000}
        transition={Flip}
        position={toast.POSITION.TOP_LEFT}
      />
    )
  )
}

function ToastText() {
  return (
    <>
      <h6
        style={{
          margin: 0,
          fontSize: '15px',
          fontWeight: 'bold',
          paddingBottom: '5px',
        }}
      >
        Your daily goal reminder
      </h6>
      <p style={{ margin: 0, fontSize: '12px' }}>
        46 min left to achieve your daily goal. Go for it!
      </p>
    </>
  )
}```

[kaayso]

You must declare <ToastContainer /> in root of your app. For example in App component :

// app.jsx

import React, { Component } from "react";
import { ToastContainer } from "react-toastify";

class App extends Component {

  render() {
    return (
      <div>
        <ToastContainer />
        <OtherComponent>
        ...
      </div>
    );
  }
}

export App;

// index.js

import App from "./app";
import React from "react";
import ReactDOM from "react-dom";
import registerServiceWorker from "./registerServiceWorker";

ReactDOM.render(
    <App />,
  document.getElementById(`root`),
);
registerServiceWorker();

Now, you can call toast function in children components.

[mattcarlotta]

This setState warning also occurs when using Webpack’s inline hot reloading. It appears that the eventManager.on calls in the ToastContainer are being triggered in an unmounted/stale component.

Here’s a small reproduction of the warning (all 3 messages render as intended; remove the text, then check the console to see the React warning and now only 1 message displays):

---

Working in combination with PR #409, setting a ref on the div and using it as a conditional will prevent unmounted nodes from having their state updated:

 ...

  componentDidMount() {
    eventManager
      .cancelEmit(ACTION.WILL_UNMOUNT)
      .on(ACTION.SHOW, (content, options) =>
        this.ref ? this.buildToast(content, options) : null
      )
      .on(ACTION.CLEAR, id =>
        !this.ref ? null : id == null ? this.clear() : this.removeToast(id)
      )
      .emit(ACTION.DID_MOUNT, this);
  }

 ...

 render() {
   return (
     <div ref={node => (this.ref = node)} className={`${RT_NAMESPACE}`}>
        {this.renderToast()}
      </div>
   );
 }

Working repo (with both #409 and #411 PRs combined and compiled):