Unmount after drag causes "setState on unmounted component" error

[Tenga]

Draggable component seems to trigger an error after it is unmounted as the result of an onStop handler.

Specifically:

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 the componentWillUnmount method.
  in Draggable (created by App)

It seems similar to #130.

I've made a simple repro of the issue with the latest version that you can find here.

It only seems to happen once, and any following unmounts, even on other instances of the component, do not trigger the error.

[STRML]

I think this is because of:

https://github.com/mzabriskie/react-draggable/blob/8c3083c7bdd5a1d16a9d41995e61421d257f5598/lib/Draggable.js#L284

If that synchronously changes the parent state to unmount the component, the following setState will fail.

I don't think this actually affects anything beyond the setState being a noop. All the event handlers have already been removed by this time.

[timoxley]

+1 this is annoying

[naman13924]

have you find a solution to above problem
I understand it doesn't affect anything but a console error should not be there

[willbee28]

Also having this issue. Only happens on first drag/onStop call. What's the deal with this? Anyone found anything yet?

[STRML]

Fixed in #424

[markvital]

I was still able to reproduce the warning:
https://codesandbox.io/s/snowy-snow-zrp4u?file=/src/index.js:0-894

It also appears in my local project with react-draggable v4.3.1.

Does anyone still experience it after #424 fix?

[PathToLife]

I'm still experiencing it as well v4.3.1

Can see the error being shown in your sandbox as well

As Tenga Mentioned, Perhaps linked to this: #130

[jsguy]

It looks as though you need to return false from the onStop handler, and the error is gone - I've edited @markvital example with the fix here:

https://codesandbox.io/s/epic-kilby-qxzzx?file=/src/index.js

[PathToLife]

It looks as though you need to return false from the onStop handler, and the error is gone - I've edited @markvital example with the fix here:

https://codesandbox.io/s/epic-kilby-qxzzx?file=/src/index.js

wow, @jsguy nice find, was it in the documentation or somewhere in the source? 🤪🤪 Thank you!

There isn't an example / explicit statement for onStop, but there's references to this behavior hidden away in the readme.md

Extract from readme.md

type DraggableEventHandler = (e: Event, data: DraggableData) => void | false;

// Called when dragging starts. If `false` is returned any handler,
// the action will cancel.
onStart: DraggableEventHandler,
 
// Called while dragging.
onDrag: DraggableEventHandler,
 
// Called when dragging stops.
onStop: DraggableEventHandler,

edit:
just making clear, returning false fixed my problem.

I was calling a prop, that passed a parent handler, that called a redux action, that set a state, that triggered a refresh, that triggered an array.map() => {}, that deference the Draggable.

Fix applied in react ts hook

const handleDragStop = (e: DraggableEvent, drag: DraggableData): void | false => {

if (something) {

    // The cause for deference should be called last
    props.onMoveFinish(draggingPiece, dragFrom.encoding, dragTo.encoding)

   // Fixes Warning: Can't perform a React state update on an unmounted component. This is a no-op.. Draggable
    return false;
    }
}

[jsguy]

@PathToLife I looked at the PR code: https://github.com/STRML/react-draggable/pull/424/files
I think it would be nice to somehow fix the problem properly - you shouldn't need to return false here.

[knownasilya]

Also affects react-resizable which doesn't return false https://github.com/react-grid-layout/react-resizable/blob/master/lib/Resizable.js#L147