After looking at your live demo, this seems like this is a closure related issue in React.

In the original code, handleLoadMore captures the value of after at the time of its creation. If this changes later, then handleLoadMore will still refer to the old value since it was defined in the initial scope of this render. This means that every time LoadMore component is using the handleLoadMore, it's still using the initial version of it.

Personally, I would use a ref to access the current value of after, while also keeping the handleLoadMore more stable.

As for your side question, this may help. After a quick google search I was able to find that apparently requestIdleCallback or requestAnimationFrame may be of assistance if you're using non-urgent UI updates.

Let me know if this is helpful, or if I may be able to provide some more assistance for you!