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

Question

[tron21]

Всем привет! Возник теоретический вопрос по работе с 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>
);

Answer 1

[Владимир Коротенко]

Мне больше нравится вариант с Css
Он проще, универсальный и понятен всем. А вот возникающий элемент из ниоткуда это нонсенс.
Единственное оправдание это экономия трафика.

Comments

[tron21]

Мне тоже больше нравится css вариант и использую я именно его. Просто возник вопрос теоретический. Будет ли происходить рендер элемента, на котором стоит условие по ширине экрана? Отрендериться ли он и потом скроется из дерева или вообще не будет создан?

Ну и как быстро работает передача пропса по сравнению с css стилями. Хочется на будущее понять что из этих двух вариантов быстрее на большом проекте

[Владимир Коротенко]

tron21, рендер происходить не будет. По поводу скорости не скажу, тут только профайлер

[tron21]

Владимир Коротенко, понял. Спасибо!

Answer 2

[Артем]

Я предпочел бы 2 вариант.
только единственное, что бы сделал это отдельный хук, который бы возвращал ширину экрана и использовал бы в компоненте. Передача пропсом здесь не нужна.
Если сравнивать с css вариантом, то тут выгода на лицо, меньше медиа запросов и логика компонента упакована в одном месте. Например компонент делает какие-то вычисления, то смысл их делать если ширина экрана не та, следовательно нужно меньше ресурсов на рендер.

Comments

[tron21]

То есть при display: none и медиа запросах рендер этого элемента все равно бы происходил, верно?

И насчет хука. Имеете ввиду сделать единый хук, который просто переиспользовать в нужных компонентах? Наподобие того что рассказывают в документации к реакту про создание своего хука? Просто я не делал ранее свой собственный хук

[Артем]

tron21,
Да все верно.
Это легко проверить
Рендер будет если мы смотрим относительно реакта, элемент появится в дом, но стилями будет скрыт.

А при условном рендере компонента такого не будет.

На счёт хука, да переиспользуемый useWindowWidth или как то так, на ваше усмотрение.

import React, { useLayoutEffect, useState } from 'react'; 
  
 export const useWindowSize = () => { 
     const [ size, setSize ] = useState( { 
         innerWidth: 0, 
         innerHeight: 0, 
         outerWidth: 0, 
         outerHeight: 0 
     } ); 
     useLayoutEffect( () => { 
         const updateSize = () => { 
             setSize( () => { 
                 return { 
                     innerWidth: window.innerWidth, 
                     innerHeight: window.innerHeight, 
                     outerWidth: window.outerWidth, 
                     outerHeight: window.outerHeight, 
                 } 
             } ); 
         } 
         window.addEventListener( 'resize', updateSize ); 
         updateSize(); 
         return () => window.removeEventListener( 'resize', updateSize ); 
     }, [] ); 
     return size; 
 }

Плюс с таким подходом можно и вовсе структуру приложения менять, чего не сделать с css

[tron21]

Артем, спасибо большое за пример.

И ещё один небольшой вопрос, если можно.

Допустим у меня есть один большой компонент и внутри него несколько других. Мне необходимо отслеживать ширину во всех компонентах. Лучше в каждый передавать свой хук или передать только в основной родительский и оттуда уже раскидывать его через пропсы в дочерние?

[tron21]

Просто ведь если раскидывать хук на дочерние компоненты, то получится что я вешаю слушатель несколько раз. И удаляю его тоже несколько раз

[Артем]

tron21,
Все зависит от структуры.
Если на одном уровне вложенности, то можно в родительском использовать хук и пропсом передать в дочерний.
Можно через redux реализовать сохранение значений ширины и в нужных компонентах извлекать из стора.
Тут вариантов много.
Хук можно улучшить, например смотреть есть ли уже слушатель с инстенсом нужной функции, если нет, то навестить. Я дал идею, дальше можно капать в этом направлении.

[tron21]

Артем, ещё раз большое спасибо, за подсказку.