how to scroll to previous state of infinite list? - reactjs

Question

my way is storing yOffset then use window.scrollby() when component re-render but it doesn't work.
method for storing and get value from sessionStorage
my state
const [users, setUsers] = useState([]);
const [pageNumber, setPageNumber] = useState(1);
const [hasMore, setHasMore] = useState(true);
useEffect(()=>{
const handleGetPreviousOffset = () => {
const scrolledIndex = sessionStorage.getItem("scrolledIndex")
scrolledIndex && window.scrollBy(0,scrolledIndex)
};
handleGetPreviousOffset()
},[])
useEffect(() => {
const handleScroll = () => {
sessionStorage.setItem("scrolledIndex",window.scrollY)
};
window.addEventListener("scroll", handleScroll);
return () =>{
window.removeEventListener("scroll", handleScroll)
}
},[]);
method for get list from server
const handleFindingUser = async () => {
setPageNumber((prevState) => prevState + 1);
const findingCondition = {
userId: "1",
height: 160,
userGender: "Girl",
age: 25,
coordinates: [106.70911015078109, 10.920765741379807],
distance: 100000,
hobbies: "61a88a564f32ef06a8dfb159",
pageNumber,
};
const users = await dispatch(findingUser(findingCondition, pageNumber));
switch (true) {
case users.payload.data.users.length > 0: {
setUsers((prevState) => {
return ([...prevState, ...users.payload.data.users]);
});
setHasMore(true);
break;
}
case users.payload.data.users.length === 0 ||
users.payload.data.users.length < 20: {
setHasMore(false);
break;
}
default:
break;
}
};
useEffect(() => {
handleFindingUser();
}, []);
finally,i use infinite list library
<InfiniteScroll
dataLength={users.length} //This is important field to render the next data
next={handleFindingUser}
hasMore={hasMore}
loader={<h4>Loading...</h4>}
endMessage={
<p style={{ textAlign: "center" }}>
<b>Yay! You have seen it all</b>
</p>
}
>
{users.map((user) => {
return (
<div
key={user.userId}
id={user.nickName}
className="d-flex"
style={{ margin: 12 }}
>
<p>{user.nickName}</p>
</div>
);
})}
</InfiniteScroll>
i can see handleGetPreviousOffset function was call but i don't know why window.scrollBy() still not work, i missing something?
have a nice day, everyone!

Answer 1

You can save the offset, but a better way is using hash in the URL (by id) and save it in localstorage or (sessionStorage), when you are done remove it.
Refer to this for more information.