The question is how to Hide/Show components properly.

Example. Basic popup modal component:

const Modal = ({children, isOpen}) => {
    const [value, setValue] = useState(0)

    const functionOne = () => {
        doSomething
    }

    return (
        <div>
            {children}
        </div>
    )
}

If i want to Show/Hide this modal window, I have 2 options.

a) Toggle rendering in parent component

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

b) Toggle rendering inside Modal component

...
const [value, setValue] = useState(0)

if (!isOpen) {
    return null
}

...

Option B seems more elegant, because it hides logic inside component. But all unrendered components are still shown in React component tree, containing all variables. This method provided in official docs Preventing Component from Rendering and being used by Material UI.

Option A not so elegant, but it makes component tree much smaller, because all hidden components are not added to the React component tree.

What is the Best Practice in that situation? Do unrendered components in component tree have any significant impact on the performance, or could be ignored?