адаптивный макет в приложении React

Question

задача состоит в том, чтобы показать разные компоненты в зависимости от ширины устройства;

Я предложил два варианта:

1. написать компонент React, который будет принимать несколько компонентов,на каждую ширину (см, мд, хл).Он автоматически проверит ширину устройства и отобразит только один компонент на основе ширины.( пример )

<DeviceChecker>
    <Desktop>
        <List/>
    </Desktop>
    <Mobile>
        <Carousel/>
    </Mobile>
</DeviceChecker>

В этом подходе мне не нравится проверка ширины события изменения размера окна.

Запишите оба компонента в React, но с помощью медиазапросов CSS отобразите или спрячьте каждый из них, например:

<div>
    <Carousel className="sm" />
    <List className="md" />
</div>

в данном случае мне не нравится то, что React будет отображать оба компонента, но один из них будет просто скрыт

Я знаю, какреализовать оба варианта, но вопрос в том, Какой правильный способ написания адаптивных макетов для приложений React?