I am using the vis-js timeline library and I would like to use JSX in the template option as shown in the example. I use a combination of ReactDOM.createPortal and ReactDOM.render to create a template for all my items.
const options = {
template: (item, element) => {
return ReactDOM.createPortal(
ReactDOM.render(<Tag key={item.id}>item.id</Tag>, element),
element
);
},
};
This seems to be causing a memory leak. Over time the number of Detached HTMLDivElements grows until I run out of memory.
When I change the code to regular javascript the memory usage seems fine.
const options = {
template: (item, element) => {
return "<div key={item.id}>item.id</div>";
},
};
As I understand from this page I should not be using the ReactDOM.CreatePortal in this case because the Timeline and the items in it are children of my own DOM node. But when I leave it out I get the same error as reported here. I am curious what causes this memory leak and how I could avoid it. Especially since the combination of ReactDOM.CreatePortal and ReactDOM.Render are used in the previously mentioned example.