React: How to use innerHTML to unmount child nodes?

Question

I have say around 30K+ components on the page. On click of a button I unmount all the 30K+ components via conditional rendering which becomes super slow around 10+ seconds and causes the page to hang. On the other hand setting the innerHTML to "" on the parent container is able to do it in milliseconds. But the problem with the innerHTML approach is React is not able to know whether these components were removed from the DOM or not, so on the next render all the 30K+ components reappear. Is there some way to use innerHTML to remove all the nodes but still ensure React knows that all the components have been unmounted?

Answer 1

I was able to use the clearLayers method of Leaflet.js to clear all the marker nodes. This fixed the unmount slowness.