Блог

У меня есть компонент:

 const MessagesTable = () => {
  const { folderName } = useParams();
  const folders = useSelector((state) => state.data.folders);
  const folder = folders[folderName];

  return (
    <div>
      {folder.messages.map((message) => <MessageElement key={message.id} />)}
    </div>
  )
}
 

Когда я прокручиваю вниз одну папку и переключаюсь на другую, она тоже прокручивается вниз. Но мне нужна позиция прокрутки для сброса. Это не помогает:

 useEffect(() => {
  scrollUp();
}, [folderName]) // I tried folder.messages dependency too
 

после переключения папки она действительно прокручивается вверх, но элементы сообщений монтируются немного позже, и после этого таблица снова прокручивается вниз (каким-то образом React запоминает положение прокрутки из предыдущей папки, потому что MessagesTable не был размонтирован).
Теперь я решил эту проблему, введя в MessageElement useЭффект со счетчиком смонтированных элементов сообщений, и после того, как все они смонтированы, я выполняю прокрутку. Но я думаю, что это плохое решение, так как у меня может быть большое количество сообщений. Не могли бы вы посоветовать что-нибудь получше?