Cannot update unmounted component

[mattcorner]

Bug Report

Describe the bug

When the callback for onChange on the DropzoneArea results in the dropzone being unmounted, React throws the following error:

Steps to reproduce

https://codesandbox.io/s/confident-feynman-xvfpn?file=/src/App.js

I've put together a simple sandbox to show the issue. As soon as a file is added, the dropzone is unmounted, but something is still trying to update its state.

Expected behavior

No error for a valid use case.

Versions

• OS: [e.g. iOS] Windows 10
• Browser: [e.g. chrome, safari] Microsoft Edge
• @material-ui/core version: [e.g. 4.9.2] See sandbox
• material-ui-dropzone version: [e.g. 3.0.1] See sandbox

Additional context

Use case is that I have a wizard where the user uploads a file. The file is automatically parsed and the user is moved to the next step of the wizard which unmounts the dropzone.

[punit-viasimplex]

Facing the same issue

[gaitat]

My workaround:

const handleChange = (files) =>
  window.setTimeout(() => {
    setShowDropzone(!Boolean(files.length));
  }, 100);

[invincibleyolk]

Same. Just used a component to wrap it, and shows the same bug