Как и другие упоминавшиеся, существует довольно много пакетов для адаптивного дизайна - CSS-фреймворки, библиотеки компонентов React и т. Д. Также нетрудно создать свой собственный пакет, используя flexbox и / или grid.
Что касается React-centric , приближающегося к , то вот тот, который довольно эффективен. Предполагается, что вы используете SSR.
Используйте Context API для создания компонента поставщика точек останова. Его задача - отслеживать текущую точку останова и прослушивать событие изменения размера для изменения состояния по мере необходимости. В конструкторе примите размер окна просмотра по умолчанию. Это можно заполнить на стороне сервера, используя сниффинг агента пользователя.
Используйте Потребителя из контекста точки останова, чтобы отобразить текущий размер области просмотра. Это можно использовать для условной загрузки компонентов на основе области просмотра вместо их рендеринга, а затем скрытия их с помощью CSS с помощью медиазапросов. Таким образом, вы отправляете меньше CSS / HTML по проводам, тратя меньше времени на обработку JS и CSS, а для более крупных сайтов это может существенно снизить время загрузки. :)