на toggler выполняется функция которая сворачивает/разворачивает меню (изменяет высоту выпадающего меню (от нуля до высоты содержимого)). Как мне более правильно менять высоту меню? через ref.current.style.setProperty или менять состояние styles и подключить его в prop style?
короче говоря, как правильно? при изменении стиля компонента перерисовывать его или можно просто через ref поменять стиль без перерисовки?
Что значит поменять стиль без перерисовки? Посмотрите, из чего состоит цикл отрисовки в профайлере в Chrome. У вас будет фаза Layout, фаза рендеринга. Вопрос только в том, что будет делаться в Layout, насколько дорого.
ну на сколько я знаю если изменить prop style через useState, то компонент перерисуется, а если через ref.current.style.setProperty, то перерисовки не будет компонента
Вы наверное имеете в виду, что не будет перерассчета стиля, и есть шанс, что не вызовется layout, если поменять только то, что не вызовет переасчет layout, а в случае присвоения нового стиля целиком, layout будет перерасчитываться. С перерасчетом Layout существенно дороже, но отрисовка все равно будет, это то, что формирует пиксели на экране, которые вы видите. Нужно смотреть, изменение каких свойств вызывает операцию layout
Вот здесь есть некоторые методы, как двигать элемент без layout reflow. https://stackoverflow.com/questions/35306531/change-width-of-element-without-reflow
Обсуждают сегодня