This is wrong. It's true that the elements are still constructed, but nothing is mounted and since React only goes in top-bottom the non-rendering / non-mounted children will never be looked at.
Look at this example.
constIF=({condition,children})=>{if(!condition)returnnull;return<React.Fragment>{children}</React.Fragment>;};constExample=({name})=>{console.log('Render Example',name);return<div/>;};ReactDOM.render(<div><IFcondition={false}><Examplename="false - not displayed"/></IF><IFcondition={true}><Examplename="true - displayed"/></IF></div>,document.querySelector("#app"))
What you'll see in the console is:
"Render Example", "true - displayed"
(Note there is no false - displayed shown.)
So there shouldn't be any such thing as a network request (which anyway shouldn't appear there, because these things are side-effects and, e.g., useEffect would only be called on mounted components anyway).
The only issue with this approach is that you construct more objects (i.e., React elements) than you would otherwise. This becomes only an issue when you have a larger render tree spawning from there.
This is wrong. It's true that the elements are still constructed, but nothing is mounted and since React only goes in top-bottom the non-rendering / non-mounted children will never be looked at.
Look at this example.
What you'll see in the console is:
(Note there is no
false - displayed
shown.)So there shouldn't be any such thing as a network request (which anyway shouldn't appear there, because these things are side-effects and, e.g.,
useEffect
would only be called on mounted components anyway).The only issue with this approach is that you construct more objects (i.e., React elements) than you would otherwise. This becomes only an issue when you have a larger render tree spawning from there.
Exactly 🙂 Thank you for detailed clarification.
No issue with extra elements in Solid, no matter how big the app gets. Check it out!
solidjs.com