@media запросы или window.addEventListener('resize')

При адаптивной верстке иногда возникает ситуация, когда дизайн мобильной версии значительно отличается от декстопной версии.

И в таком случае приходится писать отдельную верстку для мобильной версии и отдельную верстку для десктопной версии.

Вопрос: как правильнее решить данную задачу? Сделать всё силами @media css выражений:

.test__desktop {
  display: none;

  @media screen and (min-width: 768px) {
     display: block;
  }
}

.test__mobile {
  display: block;

  @media screen and (min-width: 768px) {
     display: none;
  }
}

<div class="test">
  <div class="test__desktop">...верстка десктоп версии</div>
  <div class="test__mobile">...верстка мобильноей версии</div>
</div>

Либо через JavaScript (на примере React)?

const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
   const checkWindowSize = (event) => {
       setIsMobile(window.innerWidth < 768);
   }

  window.addEventListener('resize', checkWindowSize);

  return () => {
     window.removeEventListener('resize', checkWindowSize);
  }
}, [])

return (
  <div className="test">
    {!isMobile && <div class="test__desktop">...верстка десктоп версии</div>}
    {isMobile && <div class="test__mobile">...верстка мобильной версии</div>}
  </div>
)

Какое из решений лучше и почему? Либо есть еще варианты?