Unmounting component in React

Recently I came across a scenario where the parent component did unmount from DOM but its child component still existed there. It was surprising!. I dig deeper into the code, putting logs to find out whats happening. The reason was because the child component was rendered inside parent container using ReactDOM.render api. And, unlike normal parent child mount-unmount lifecycle, react didn’t unmount this automatically. After reading through the documentation, I finally got unmountComponentAtNode api that was build for this purpose. If you also haven’t heard of this before, go check this out https://reactjs.org/docs/react-dom.html#unmountcomponentatnode

Note: With React 18, the apis are changed. This remains valid for previous versions.