Your approach has an issue: the children are still being rendered, they’re just not being displayed. So if you have a component that, say, makes a network request when it mounts, that’s still going to happen, which is likely not what you want.
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.
Interesting. Can you explain further? They are rendered by the parent component but the 'IF' component just controls whether they are displayed or not?
Correct. ‘IF’ and the child are rendered from the same place. The ‘children’ prop is just a reference, is not actual call site. To actually prevent it from being rendered, you would want to call the conditionally rendered component from the ‘IF’.
I'm not sure if this is a good way to test but I tried testing it by creating a component that logs to the console when it renders and it looks like that code never ran.
Exactly, this will actually add the child node to the tree and perform any effects for example. You can avoid this by using render props, but that kinda defeats the purpose.
Actually it shouldn't run. I've created a codesadbox for you guys to check out where you can see both functional and class based components.
Here is the link: codesandbox.io/s/nice-wiles-cwfi6?...
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Your approach has an issue: the children are still being rendered, they’re just not being displayed. So if you have a component that, say, makes a network request when it mounts, that’s still going to happen, which is likely not what you want.
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
Interesting. Can you explain further? They are rendered by the parent component but the 'IF' component just controls whether they are displayed or not?
Correct. ‘IF’ and the child are rendered from the same place. The ‘children’ prop is just a reference, is not actual call site. To actually prevent it from being rendered, you would want to call the conditionally rendered component from the ‘IF’.
I'm not sure if this is a good way to test but I tried testing it by creating a component that logs to the console when it renders and it looks like that code never ran.
Link to CodePen: codepen.io/hedwardd/pen/xxdOpxy?ed...
Could it have something to do with it being a functional component?
Exactly, this will actually add the child node to the tree and perform any effects for example. You can avoid this by using render props, but that kinda defeats the purpose.
Does it? Now I'm confused. If you look at the CodePen I created, the effects don't seem to run (unless I'm misunderstanding something)
Actually it shouldn't run. I've created a codesadbox for you guys to check out where you can see both functional and class based components.
Here is the link:
codesandbox.io/s/nice-wiles-cwfi6?...