1

I have a React component that creates an event listener, and displays a list of links. Once the user clicks on a link the componentWillUnmount method is called and a new page displayed. My component continues to function and handle events after it has been unmounted. This works as intended as I am keeping track of whether my control is mounted or not and calling functions passed in through props based on the mounted/unmounted state.

Everything seems to be working fine, but I've read in the React docs, "componentWillUnmount() is invoked immediately before a component is unmounted and destroyed". I am also aware that isMounted is an anti-pattern so I am keeping track of whether the control is mounted myself. Is it just a matter of time before my component is destroyed or is my event listener keeping it from being destroyed?

Ted1391
  • 139
  • 3
  • 12

2 Answers2

2

I think the solution for your problem is using a library like Redux. It will handle your state and actions for you, so you don't have to worry about components in an unmounted state.

That being said, this is actually a known memory leak issue in React. You can see the issue here.

Cassidy
  • 3,328
  • 5
  • 39
  • 76
0

componentWillUnmount() Is designed for handling the cleanup of a component. This includes cleaning up event listeners and timers etc. I believe the correct approach would be to remove the event listener in this function.

Ryan Crichton
  • 219
  • 2
  • 9