Should I use twitter bootstrap or javascript to hide a div?

Question

I am using reactJS and I would like to hide a div on smaller screen (width<768px). I have two options here:

First Method:

{
 !!isSmallerScreen ? 
 <div className="icon">Icon</div>
 : <div className="name">Name</div>
}

Description: isSmallScreen is a boolean variable. This way will not even show other div in source code.

Second Method:

   <div className="icon hidden-md-up">Icon</div>
   <div className="name hidden-sm-down">Name</div>

Description: I'm using twiitter bootstrap here which will add display: none on other div.

P.s. I know bootstrap is also using javascript but my question is which approach is better to use? Infact I am confused whether to use bootstrap or not as I'm already using css3 flexbox system with postcss and cssnext.

Your suggestions will be highly appreciated. Thanks for your time in advance.

score 0 · Answer 1 · answered Apr 15 '17 at 01:32

0

In the second method, though will hide the div but still remain in the DOM.

You should use ReactJS method and not render the div is possible. The reason being if you don't need a dont unnecessarily create it and make the DOM heavy.

Hope this helps.

answered Apr 15 '17 at 01:32

dattebayo

1,362
9
4

score 0 · Answer 2 · answered Apr 15 '17 at 01:36

Matter of preference (and minimal perfomance issue probably not worth stalling the decision making).

Personally I would go with the second method for the simple reasons that:

Easier to add transitions (fade in/out)
A little cleaner
Your vdom will stay the same - if a 3rd party, or yourself, later decide to manipulate the dom outside react, you know it will be consistent. (ie, selecting nth-child, etc). no surprises.

But, ultimately up to you :)

score 0 · Answer 3 · answered Apr 15 '17 at 05:11

As dattebayo pointed out, it is bad practice to add unnecessary elements to the DOM. When making a decision in how something should be hidden, ask yourself a couple questions;

Will this element alternate state? Not this.state but whether or not it is hidden.

If not, then conditional rendering is the clear choice.

render() {    
   return (
       this.props.isSmallScreen ?
           <SmallScreenElement /> :
           <BigScreenElement />;
   );
}

If yes, will it alternate state frequently?

If yes, CSS is likely the choice for this particular element.

Otherwise stick with conditional rendering.

I hope this helps!

Should I use twitter bootstrap or javascript to hide a div?

3 Answers3