`display: none` vs conditional render in React

Question

I'm having trouble resolving the difference between the two rendering patterns in React. Hope someone can shed some light on this question.

Template 1: Respond to conditional rendering

https://facebook.imtqy.com/react/docs/conditional-rendering.html

class List extends React.Component {
  state = {
    menu: false,
  }
  handleMouseOver = () => {
    this.setState({
      menu: true
    });
  }
  handleMouseLeave = () => {
    this.setState({
      menu: false
    });
  }
  render() {
    const { menu } = this.state;

    return (
      <li
        onMouseOver={this.handleMouseOver}
        onMouseLeave={this.handleMouseLeave}
      >
        {menu && <Menu />}
      </li>
    );
  }
}

Sample 2: display: none

.menu {
  display: none;
}

.li:hover .menu {
  display: block;
}

const List = () => (
  <li className="li"><Menu className="menu"/></li>
);

Question:

If I need to display 100 of these elements on one page, which template should I go for?

How to determine which template is better?

Is there any performance advantage from using one over the other?

Answer 1

display: none , , - (, hover ..). (, , ), . , - , , css , .

, .

TL; DR: CSS, (, hover), ,