React state update warning – Draftail should clear its save timeout handler when unmounting

[thibaudcolas]

Do you want to request a feature or report a bug?

Bug. I’ve noticed this a few times while testing, also reported on Slack.

What is the current behavior?

When unmounting the editor, the following warning sometimes gets displayed by React:

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.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. GIFs and screenshots are very helpful too.

Unmount the editor shortly after having changed its content – potentially by setting a high stateSaveInterval.

What is the expected behavior?

No warning should be displayed. The editor shouldn’t call its save callback once unmounted.

Which versions of Draftail + Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draftail or Draft.js?

Latest version of Draftail

---

I think the correct fix for this is simply to clear the onSave timeout handler in a componentWillUnmount.