I have list of posts that I am mapping on the screen, one after another. When I scroll down the list, it is appending new items to the bottom like on every social media site. The Site is jumping around on every append as the window height changes. How can I prevent that from happening ?
I tried to change the scroll position back on every screen resize manually. Like
useEffect(()=>{ window.scrollTo(0,previousScrollYPosition) }, [height])
But somehow this didnt change anything.
It has probably something to do with the Posts. Posts have a tree like structure. So each post has an item in its object called sub. Sub have others subs and so forth... The are not possible to represent in a map function as it would work with just one depth. So I used like this.
<Item item={item}>
{item.message}
<Item message={item.child}/>
</Item>