чтобы некое действие происходило в ответ на изменение размера компонента Box. В него вложен компонент MessageList, в котором происходит подгрузка сообщений. На скрине я показал, как бы это должно было выглядеть в идеале. Т.е. есть ref на этот компонент, и useEffect запускается из-за изменения scrollHeight этого элемента. Но, как я понял, проблема в том, что на момент запуска useEffect в первый раз, компонент, на который этот ref ссылается, ещё не отрендерился и является undefined, что выдает ошибку. Вопрос, можно ли как-то запустить код только после того, как все дочерние компоненты отрендерятся или есть какие-то другие более простые способы отслеживать изменение размера элемента?
Попробуй так: messageListContainer?.scrollHeight
а что мешает в deps отправить [messageListContainer, messageListContainer?.scrollHeight] ?
Этот код не будет работать так, как ты хочешь. Потому что дом-элементы не уведомляют реакт (или кого-то ещё) о своих изменениях. Тебе нужно явно подписаться через addEventListener
А в реакте нет встроенного способа подписываться на изменения dom?
Только непонятно — в начале вопроса ты говоришь про изменения размеров, а в коде почему-то скролл. Есть ResizeObserver
может сторонняя библиотека какая?
чел, у рефа свойство current
Да, там так в начала
в эффекте это доставай
ща, попробую
Все правильно
может дело в окружении? Версия реакт, браузер,npm и т.д . Observer - вроде новая фича
Там параллельно работает такая шняга и при подгрузке сообщений scrollHeight у компонента Box увеличивается. Я же правильно понимаю, что это ресайз?
нет. scrollHeight это не изменение размера
а как тогда изменение scrollHeight можно отследить?
addEventListener есть там
Обсуждают сегодня