CRS-292 Prevent state updates on unmounted Channel component #566
Conversation
… state update if component has already been unmounted.
|
Size Change: +264 B (0%) Total Size: 1.25 MB
ℹ️ View Unchanged
|
src/components/Channel/Channel.js
Outdated
| @@ -138,6 +138,7 @@ const ChannelInner = ({ | |||
| const lastRead = useRef(new Date()); | |||
| const chatContext = useContext(ChatContext); | |||
| const online = useRef(true); | |||
| const isMounted = useRef(true); | |||
There was a problem hiding this comment.
I have seen this weird issue with our previous class based components as well. LGTM
@ath92 Maybe can we extract it to separate hook?
const isMounted = useIsMounted();There was a problem hiding this comment.
I suppose this hook would basically be a combination of useRef for storing the flag + useEffect for setting it to true/false?
There was a problem hiding this comment.
Just did this, also allowed me to write a test quite easily :)
|
Would be nice if we could also get rid of the root cause of the warning. In this case, cancel the promise or abort the request. |
It seems But I don't think that would actually get rid of state updates; I think in this case cancelling the request will add little benefit: it would require additional stateful logic (i.e. we'd have to keep the axios cancelToken somewhere, and make sure the request actually gets cancelled on unmount). If the server handles cancellation requests, I think in most cases this request would arrive at the server too late to make a difference. |
|
@ath92 think this will do for now, let's get this merged and released. |
delete-merged-branch
bot
deleted the
CRS-292-Channel-unmounted-dispatch
branch
Description of the pull request
This prevents React from logging a warning to the console if the
Channelcomponent finishes itsloadMorecallback after it has already been unmounted.Steps to reproduce:
loadMorefunctionloadMoreis still fetchingNote: I spent quite some time trying to write a test case for this, but it seems that it's very hard to figure out if a component tries to update its state after it has been unmounted. For example, React prevents the actual reducer from being called, so you cannot just spy on that to know if there was an attempted state update.