La pregunta es cómo Ocultar/Mostrar componentes correctamente.

Ejemplo. Componente modal emergente básico:

 const Modal = ({children, isOpen}) => { const [value, setValue] = useState(0) const functionOne = () => { doSomething } return ( <div> {children} </div> ) }

Si quiero Mostrar/Ocultar esta ventana modal, tengo 2 opciones.

a) Alternar representación en el componente principal

 <div> {showModal && <Modal />} </div>

b) Alternar renderizado dentro del componente Modal

 ... const [value, setValue] = useState(0) if (!isOpen) { return null } ...

La opción B parece más elegante, porque oculta la lógica dentro del componente. Pero todos los componentes no renderizados todavía se muestran en el árbol de componentes de React, que contiene todas las variables. Este método se proporciona en los documentos oficiales Impedir que el componente se represente y sea utilizado por Material UI.

La opción A no es tan elegante, pero hace que el árbol de componentes sea mucho más pequeño, porque todos los componentes ocultos no se agregan al árbol de componentes de React.

¿Cuál es la mejor práctica en esa situación? ¿Los componentes no representados en el árbol de componentes tienen algún impacto significativo en el rendimiento o podrían ignorarse?