InfiniteScroll | Endless scroll in ListView or RecyclerView with simple steps | RecyclerView library

I am facing a problem with re-rendering after a state change in my NextJS app.

The function sendMessageForm launches a redux action sendMessage which adds the message to the state.
The problem is unrelated to the returned state in the reducer as I am returning a new object(return {...state}) which should trigger the re-render!

Is there anything that might block the re-render ?
This is the file that calls & displays the state, so no other file should be responsible ! But if you believe the problem might lie somewhere else, please do mention !

I have a function newsFeed which is called by useEffect and makes a request to an endpoint to fetch all posts made by the logged in user as well as any users they follow, and then saves the data response to the state:

What is up, guys? I have an array of objects, I have Grid container, I map through array and render Grid items. Everything is ok, except all Grid cards get rendered at the same time and I have a long list. So, I decided to add infiniteScroll component. But still all cards got rendered at the same time. Here's what I return outta my component:

The problem

Basically I have a mobile website that has some videos. Each video takes 100% width and 100% height. I'm trying to make a scroll snap type feed, where the user can scroll only 1 video at a time and if they reach a certain point on the page while scrolling, it will snap to the next video. It's kinda like tiktok's video feed or instagram reels as an idea.

I'm using the scroll-snap package which kinda gets my half way to what I'm trying to achieve. It snaps when scrolling slowly, however if I was on mobile, I can just scroll really fast and allow the scroll momentum to skip videos. I'm trying to make it so the user is only able to scroll 1 video at a time no matter how hard they scroll.

Here is what's happening: https://streamable.com/f98slq. As you can see, I'm able to scroll past more than 1 video at a time.

What I've tried

I tried to get the scroll velocity when scrolling the feed. If it's higher than a certain value, I would apply a style that stops the page scroll for 10ms. This didn't really work though as the scroll momentum was able to scroll the page even if the scroll velocity wasn't high. I don't really like this solution though.

I'm not really sure the best way to approach this problem. Any feedback would be appreciated.

This is my code:

I am trying to implement with the help of this library react-infinite-scroll-component (documentation) to do an infite scroll, my idea is to have the infinite scroll at the top.

I am using the live demo(code sample) provided by this library, but I am unable to implement the infinite scroll at the top, I don't know what I am doing wrong.

In the library they mention this to achieve this:

Using scroll on top

I have tried to do an infinite scroll by using React-Infinite-Scroll-Component

Everything is working perfectly as I think, but the problem is whenever I change the Genres, or press F5 to reload the page, or somehow, the scrollbar is always at the very bottom, I did try to fix it with window.scrollTo(0,0) but it's still not working.

Or somehow do I mess up the code because I tried to work around it very hard, but I don't think I execute it well enough.

The code is very long but here's a brief explanation of what I'm trying to do in it.

I received a slug which defined as a genre with useParams, for example action or adventure, then I set it as a state genreAnime, then I check if it's the same genre, it'll do the infinite load with concat array and increase the page up to 1 for the next load, else I'll set a new array and initial the page back to 1 or else it'll keep merging with an old array of previous genre. The totalPage is set to 91, whenever it renders for the second time it'll automatically get the latest totalPage and set it back, so it's safe to go.

The translateGenre is just for translating the genre into text, so please don't bother it.

But then whenever I refresh (F5) or whenever I browse for a bit, then I change the genre, it'll get a duplicate of the same first array (due to warning and I see it has 2 same items). Due to the scrollbar of mine always staying at the "end" or at the default value of React-Infinite-Scroll-Component, which is 0.8, it means when users come below 80% of the total height, it'll trigger the next function of Infinite-Scroll-Component

Here's my code:

I am creating an React project where i am rendering the data by calling the api, and api every time gives me array of data of length 10. i am using react-infinite-scroll-component for using infinite scrolling functionality. i want to load data everytime whenever i scroll at the half part of the screen i don't want to show a loader on my screen. can anybody help me on it.

I am implementing a chat view in React,and the desired behavior is that whenever new data is pushed into the dataSource, the chat view (an infinite list) scrolls to the bottom, there are many implementations, some found here: How to scroll to bottom in react?. However when I try to implement it, I am getting this strange behavior where all the views in the window are "pushed upward" out of sight by some 300px, as if to accomadate this new

I am using IntersectionObserver api for implementing infinite scroll. When callback is called ,then inside the callback,redux state does not have updated value.The functions are: