@timofeus91
Junior Frontend Developer

Как лучше скрыть элемент в react?

Всем привет! Возник теоретический вопрос по работе с react-ом.

У меня есть задача при определенном размере экрана не рендерить определенный элемент и не показывать его на экране. Какой из этих способов не будет рендерить содержимое и какой из них более быстродействующий?

Допустим я открываю страницу с мобильного устройства шириной 600 пикселей. Как менее затратно будет с точки зрения react поступить -
Указать для класса в css
@media screen and (max-width: 767px) {
 .buttonContainer {
   display: none;
 }
}


Или сделать проверку на сам элемент отталкиваясь от размера экрана, который будет передаваться пропсом в компонент

const Test = ({ windowSize }) => (
  <section>
    {windowSize > 767 && (
      <div className="buttonContainer">
        <button>Just Button</button>
      </div>
    )}
  </section>
);
  • Вопрос задан
  • 725 просмотров
Пригласить эксперта
Ответы на вопрос 2
firedragon
@firedragon
Не джун-мидл-сеньор, а трус-балбес-бывалый.
Мне больше нравится вариант с Css
Он проще, универсальный и понятен всем. А вот возникающий элемент из ниоткуда это нонсенс.
Единственное оправдание это экономия трафика.
Ответ написан
TMProject
@TMProject
Frontend developer React/Redux
Я предпочел бы 2 вариант.
только единственное, что бы сделал это отдельный хук, который бы возвращал ширину экрана и использовал бы в компоненте. Передача пропсом здесь не нужна.
Если сравнивать с css вариантом, то тут выгода на лицо, меньше медиа запросов и логика компонента упакована в одном месте. Например компонент делает какие-то вычисления, то смысл их делать если ширина экрана не та, следовательно нужно меньше ресурсов на рендер.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы