React: Faster way to show/hide components? Toggle component or toggle display?

[Huxpro]

• Toggle Component

render(){
  var Child = something? A : B;
  return (
    <Child />
  ) 
}

• Toggle CSS Display is simple

className={this.props.shouldHide ? 'hidden' : ''} 

[dmatteo]

Those 2 methods are not equivalent.
The first one is not hiding the component, but it's not rendering it entirely (one or the other, of course), while the second have both on the DOM tree and then triggers the visibility.

The fewer things you render on the DOM, the faster* you go, so I usually stick with the first one, but I've never benchmarked it.
Also, I rely on React doing his diffs against the virtual dom, so that [re]renders are easy on the client side.

*terms and conditions may apply

[cht8687]

I agree with dmatteo.
The first approach is just switching rendering different elements. 2nd one is for hide and show certain element.

[Huxpro]

Well... I of course knew the difference, what i concentrate on is the rendering performance of both.

The first approach deal with less DOM, but it seems trigger more browser works.
Second one can cached DOM, there is no DOM manipulation but seems trigger more browser repaint?

Under this StackOverflow question there is already some discussion and someone said that he ran a benchmark and CSS way won.

But I think result may gonna change when things got more complicated.

[zpao]

This is a great question for stack overflow or discuss.reactjs.com. We're trying to keep GitHub issues for actual bugs or problems with React, not general questions, so I'm going to close out.

[deathmood]

Why does not React have inbuilt functionality to hide/show component on boolean variable? Like this:

<SomeComponent hidden={this.props.isHidden}/>

// I mean instead of writing
{this.props.isHidden ? <SomeComponent/> : ""}

Of course I can define hidden prop in each component manually or just create my own new class which inherits from React.Component, but why should I do that? Why this functionality is not already present? It is very common situation.

[sophiebits]

Writing {this.props.isHidden ? null : <SomeComponent/>} (or simpler, {!this.props.isHidden && <SomeComponent/>}) is easy and reduces the number of magic props you'd need to remember.

[deathmood]

Yes, but visibility/invisibility is closely related to rendering process (you can read it as to render element or not to render) and using props form I've written above it would have more natural and HTMLish look.

BTW React already overrides almost all standart events like 'onClick' instead of 'onclick', so remembering one more standart but usefull prop will not be a problem.

[dmatteo]

If you think about it from a composition point of view, I think it makes
perfect the sense to use this kind of very explicit conditional rendering
in the "father" component, since it's based in his props that this "child"
component will be rendered or not.

Using magic props to do this will just hurt readability and usability,
being yet again one magic thing to keep in mind.

I hate magic :)

[MicronXD]

I also hate magic, _but_ I think this could do so much for clean jsx markup that its magic-like behavior could be forgiven.

This muddies otherwise clean jsx markup:
{ !hideSomeComponent && <SomeComponent /> }

that could otherwise be handled like:
<SomeComponent hidden={hideSomeComponent} />

---

It feels so gross doing this:

    <div>
        <img src="example.jpg" />
        { !hideSomeComponent && <SomeComponent>
            Example
        </SomeComponent>}
    <div>

instead of this:

    <div>
        <img src="example.jpg" />
        <SomeComponent hidden={hideSomeComponent}>
            Example
        </SomeComponent>
    <div>

---

I don't think this would be the sort of magic where someone sits and wonders, "What does hidden do?"

[airqb]

seriously "React Native" they can make our life more easy more than this,
yes @deathmood u r right it can be rc-show or what ever,.. also it can rc-loop={item in items} or rc-model={data} really i have try VueJs it is save your life and your time as well, but only problem they don't support Native Apps, and there is framework "Weex"=>"Weed" Native witch is work under VueJS provide it by Alibab.com ,I couldn't understand anything all documentation in Chinese witch need you to learn Chinese 100 year and Weex also.. any way happy Coding

[airqb]

i hope they can make it like <Component rc-show={this.state.isVisable}/>that is it

[riaz61]

<If condition={this.state.loading}> <Text>Hello World!</Text> </If>
Use this react-native component I just created, your welcome :)

[streamich]

@riaz61 I like how you included screenshot instead of a JS snippet

[airqb]

@streamich I like also the ida of screenshot, it seem the concept behind this technique is you can see but u can't copy :)

@

[cubiccompass]

For boolean properties, I tend to use the truthy, optimistic use case:

{this.props.isVisible ? <SomeComponent/> : null }

Then map isVisible to Redux state, like store.currentView.

[streamich]

@cubiccompass You can simplify it to this:

{this.props.isVisible && <SomeComponent/>}

[gaearon]

I'm locking because we're just making circles here now. :-)

The above solution works, and we don't think it's necessary to add a magic prop when you can use a JS expression you already know and can use everywhere else in the code.