Как скрыть дочерний элемент, если он полностью не вмещается в родителя?

Pipop, если мой вариант подходит, отметьте его, пожалуйста, как решение. Мне будет приятно :)

Как скрыть дочерний элемент, если он полностью не вмещается в родителя?

Pipop, я добавил flex-wrap: wrap. Соответственно, теперь на следующую строчку переносится весь блок, а поскольку и высота контейнера указана, и есть overflow: hidden, то этих перенесенных блоков не видно. Только это относится не к .menu-list__item, а к .menu-list.

Как сделать неравномерную плитку?

А что значит, "...если разделить на три колонки при фильтрации не работает нормально..."?

Как скрыть дочерний элемент, если он полностью не вмещается в родителя?

Хотя тут я разрешил перенос, не знаю, на сколько это критично

Как обновить данные в componentDidMount, если данные идут из socket-а?

semki096, https://learn.javascript.ru/websocket

а если вместо
console.log(this.ws);
вставить
this.ws.onopen = (e) => console.log(this.ws);

Еще можно попробовать перенести создание сокета из конструктора в componentDidMount.

Как обновить данные в componentDidMount, если данные идут из socket-а?

semki096, не забудьте про закрытие соединения (обновил ответ)

Как обновить данные в componentDidMount, если данные идут из socket-а?

Почему именно componentDidMount, и чем хуки не устраивают?

Лучший Framework CSS HTML в 2020 году?

Зачем Вам сетка? Я понимаю, раньше было тяжело, поэтому приходилось пилить всякие абстракции. Но ведь сейчас есть flex, есть grid. Это все, что нужно, чтобы написать чистый и понятный css вместо десятков килобайт лишнего кода, который в итоге летит в в браузер!

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

VUE.JS createElement - как использовать html entities в render-функции?

<div>
некий&nbsp;текст&nbsp;<input>
</div>

marsdenden, а может быть тогда стоило бы такой контент передавать через слоты, а не пропсы?

VUE.JS createElement - как использовать html entities в render-функции?

marsdenden, ну раз пойдете по пути render-финкции, то осталось только подключить JSX... и перейти на React :)

Почему при построении компонентного дерева приложение зависает?

Лучше на https://codesandbox.io/ опубликуйте код

Что можно, а что нельзя сохранять в redux store?

JS Noob, если моя помощь оказалась полезной, отметьте, пожалуйста, мой ответ решением.

Что можно, а что нельзя сохранять в redux store?

JS Noob, вообще, не уверен, что в Вашем случае стоит регистрировать обработчик именно в сторе редакса. Сами данные элментов - да, подходит. Но вот регистрацию обработчика лучше отделить и разместить, например, в провайдере контекста реакта (как в моей реализации). Такое решение точно будет слабосвязанным.

Что можно, а что нельзя сохранять в redux store?

JS Noob,

корректно ли хранить в сторе функции

Почему бы не хранить в сторе функции? Функция - такой же тип данных, как число или строка. Хранится просто ссылка на область памяти, так же как и в случае с объектом/массивом.

не является ли это менее производительным или более сложным

На этот вопрос можно ответить только после замеров, но вряд ли. А на счет сложности... Ваш вариант намного сложнее.

Ведь в случае с рефами я собираю все элементы и они хранятся статично в сторе

Вы хотите "сделать компоненты не связанными между собой". Так в вашем случае компоненты становятся связанными с хранилищем. Т. е. если вдруг поменяется структура приложения, вложенность компонентов или изменится схема данных, то могут возникнуть проблемы. Вам придется менять код приложения. Когда глобально регистрируется только обработчик, то совершенно не важно, что-там может поменяться. Обработчик то регистрируется снаружи стора!

Далее я дёргаю стор только для изменения индекса активного элемента. А тут на каждый тик я перезаписываю и индекс и onClick...?

Вообще, хранение индекса активного элемента и хранение обработчика не связаны. По сути, хранимый индекс - это локальное значение, которое не используется за пределами компонента, который рендерит список. А вот обработчик события требуется.

Опять же это вопрос предпочтений, но мое мнение - надо выносить в глобальные хранилища (стор редакса или контекст реакта - не важно) то, что и требуется глобально.

Что можно, а что нельзя сохранять в redux store?

JS Noob, когда элемент становится активным, просто сохранять сам обработчик в сторе, а не ссылку на элемент.

Вот накидал пример. Сделано на React Context, но это просто вопрос предпочтений. В компоненте Card я просто сохраняю onClick-обработчик (по сути, просто ссылку на функцию) текущего активного элемента в контексте (в Вашем случае это будет redux-store).

Никакой ref не нужен. Логика такова, что когда элемент становится активным, он сам сообщает контексту свой обработчик. И потом просто нужно подписаться на событие нажатия кнопки и запустить сохраненный обработчик события, что я и делаю в компоненте KeyDown.

Ну и регистрировать текущий обработчик можно не в самом компоненте карточки, а, например, прямо в списке. Тут опять же просто вопрос предпочтений.

Что можно, а что нельзя сохранять в redux store?

JS Noob, в принципе, можно не хранить все рефы в сторе, а регистрировать только обработчик события onClick текущего активного элемента. Зачем там весь массив?

Что можно, а что нельзя сохранять в redux store?

JS Noob, зачем это делать на рефах? Ведь событие как таковое может (и должно) отслеживать изменения в данных, и на них уже и реагировать.

Что можно, а что нельзя сохранять в redux store?

JS Noob, все же в хранилище редакса нужно хранить данные. Не понял на счет несвязанности компонентов, но мне кажется, у Вас что-то с архитектурой не то, раз нужно хранить рефы.

Как работает react context?

Максим Ахмеров, просто если внутреннее дерево создается где-то снаружи и передается внутрь компонента через props.children, то при изменении такого компонента, переданное дерево детей не перерисовывается, потому что оно создано в другом месте.
Более подробно тут.

Как работает react context?

Максим Ахмеров, не так :) Имеется в виду, что внутреннее дерево провайдер должно передаваться через children. Сравните код параграфах Preventing unnecessary renders и Oops, I re-rendered the entire app, и все станет понятно.