React Hooks - Best way to remove an component temporarily from DOM without unmounting it

Question

I'm currently doing this with a combination of the React.memo HOC and display: none to minimize performance impact on the render.

I would like to know if there's a way that impact less on the performance, since I can have multiple components on this invisible state on the screen.

Answer 1

Try this

el.hide = () => {
    el.storeInnerHTML = el.innerHTML //create property
    el.innerHTML = '' //done
}
el.show = () => {
    if((el.storeInnerHTML ?? true) === true) return 
    el.innerHTML = el.storeInnerHTML
    delete el.storeInnerHTML
}