Navigate to new page in React without losing data on current page

I have done some digging on this and I have also queried chat-gpt (lol) but I cannot seem to find any resources that tackle the problem. What I am trying to do is simple: on page A, I load a list of 100 items from my server; I can click into each item which would enable me navigate to a new detailed page for that item. When I click the back button, I do not want to have to load all 100 items again, lose my scroll position etc etc.

I know I can maintain state for my scroll position and just scrollTo() in my useEffect, but it gets a little trickier for the actual data because I don't want to have to store data for my list of 100 items (could be a lot more than a 100 in production).

Is there a way to neatly do this in react? I currently navigate using the useNavigate() hook.

EDIT-- I need to state something that makes this a real problem. Page A is paginated in batches of 10. There is a 'more' button I click which loads the next 10 items from the server. So let's say I click into element number 50. When i press the back button, I would like to come back to that element. The useEffect will make it so that it's only the first 10 elements which are loaded again

from Navigate to new page in React without losing data on current page