Generally, we are building components that fit into other components while we are dealing with React and we are assuming that whatever is built with React is a component. However, this is not true. There needs to be some other way to write supporting code to bridge the external world with React. Observe the following code snippet:
ReactDOM.render(reactElement, domContainerNode)
The render method is used to update the property of the component and we can then declare a new element to render it again.
Another method, is
unmountComponentAtNode, is used to clean your code. When we have a SAP built with React components, we have to plug
unmountComponentAtNode to initiate at the right time, which results in cleaning the app's life cycle. Observe the following code snippet:
ReactDOM.unmountComponentAtNode(domContainerNode)
Most of the time, I have observed that developers don't call the
unmountComponentAtNode method and this results in having a memory-leak issue in their app.
It's always recommended to have a custom wrapper API in your API. Suppose you have a single root or more than one root and it will be deleted at some period, so in that case you will not lose it. Facebook has such a setup, which automatically calls
unmountComponentAtNode.
I also suggest not calling
ReactDOM.render() every time but an ideal way is to write or use it through the library. In that case the application will use mounting and unmounting to manage it.
Creating a custom wrapper will help you to manage configurations in one place, such as internationalization, routers, and user data. It would be very painful to set up all the configuration, every time, in different places.