-
Notifications
You must be signed in to change notification settings - Fork 47.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React fails to unmount component from within event handler #3298
Comments
You can find more informations on my usecase here: Basically on user language change I want to add the new language to the React context, and force re-render of the whole thing. This is not Flux code but I guess you'll understand what it does:
As you can see it works for me with a setTimeout, I get an error only when unmounting synchronously. |
Unmounting during a React event is not currently supported AFAIK. |
Unmounting as the result of a event sounds like a perfectly reasonable thing to want to do; I think we should try to support this. @slorber can you create a simple jsfiddle that demonstrates the issue? |
@jimfb Yes I've successfully reproduced the case here: http://jsfiddle.net/wevohwfp/ My first attempt was not working because I did not try to add another event listener to the parent |
Awesome, thanks! Issue is related to mutating nodes synchronously within an event loop. We may want to make unmount take effect at the end of the event loop. I think this demonstrates the more general problem of how to handle these top-level functions from within an event loop. |
plus one here, it's reasonable behaviour to unmount a component as the result of a React event. |
I just ran into this. for anyone else coming here, stopPropagation on the event does not work either. I ended up building a wrapper component to handle, basically acting as a mini router for the user-flow. |
We encountered this problem as well, but we've found a dirty work-around. If you wrap We use this in a portal mixin, which renders a React component in a different DOM element. This raised another problem when rendering a new component directly after unmounting the first one. In that case, the second component won't show up. We fixed this by storing a unique key in the component state and the DOM element, and only calling
This works for now, but we'd love a less dirty, more native solution |
Is this perhaps a duplicate of #2605? |
This now throws with v15 (http://jsfiddle.net/wevohwfp/1/):
I'll note that this does work if you unmount a subtree but apparently not if you unmount the whole root – because unmounting is batched differently from updates. |
I tried running the following test but could not produce the error: https://gist.github.com/quicksnap/10905082804338c9ac3f5db474dd303e I'm guessing |
@quicksnap Not sure why that wouldn't work. You could try Simulate.click which is generally preferred unless you're trying to test the event system code. |
This appears to work out of the box with Fiber: https://jsfiddle.net/5rg0wu8c/ |
For any other n00bs, Fiber is React v16. |
Hi,
When trying to unmount my whole app, I got some error.
I think it's not a big deal.
According to what I see with the debugger, it seems to be because a
SyntheticMouseEvent
is trying to get dispatched. And I guess the target has just been unmounted...Note that my use case looks like this:
When using an
unmount
synchronous implementation, I get this error.When adding a setTimeout 0 in the unmount code, I got no error.
I could not reproduce this in a jsfiddle, but I guess it's probably because I don't really know how batching work in React.
The text was updated successfully, but these errors were encountered: