React component exists even after unmount

Question

Scenario: I have a React component which shows up in one of the tabs on my website. Navigating to another tab in the same website unmounts the component and navigating back to the original tab renders the component again.

Problem: The problem I'm facing is that the older React component still shows up in the React developer tools console and everytime I navigate back to the original tab, the number of components shown there increase by one.

My question is: Are the components not getting deleted and that there is another way to delete the component which I'm not doing or it is the behavior of React developer tools console to show earlier components?

Answer 1

I'll suggest to check the actual DOM, not what you see in the devtools. It is possible that there is a bug in devtools. The way of how React's devtools work is a little bit tricky. The communication between what happens in the page and the actual devtools ui depends on couple of factors. There is a content script, background script a bridge that they wrote and so on. If you see the components number growing in the DOM then the problem is not in the devtools but in your app.