Reactjs - Master detail navigation - When going back Master should be in same position

Question

I have a Master Page. In this page is a list and a load more button. Initially, the application shows 100 items. Every time the user clicks the load more button it loads 100 more items and appends them to the list. The list can grow very long and the user can be scrolling for a long time if there are a lot of items.

While scrolling the user can click on any item and it would go to a detail page. The details page then needs to show up with some information about the item. On this page as well should be a back button. When this back button is pressed it needs to go back to the master page, but the master page needs to look exactly the same as it did right before going to the detail page. It should have the same scroll position and all the same items that were loaded previously there. This is where the problem lies as I am unable to accomplish this.

I have tried using react-router but when navigating to a new route and coming back the master page always just gets rendered and the scroll position is at the top with just the initial 100 items loaded.

I have read that I should save the scroll position and also every item I loaded from my service to save it in local storage. Then when going back to the master load everything again. The problem is if I have 1000 items this takes very long and the user usability isn't great. I am essentially looking to have the entire state of the master page always intact.

I also tried something like {!this.state.isPageOneHidden && <showPageOne> } and I would toggle this state, but the same problem occurs. Once I toggle this attribute the component gets destroyed and when I toggle it back the master page gets recreated from scratch and goes back to the top and again just the initial 100 items show.

function BasicExample() {
  return (
    <Router>
        <Route exact path="/" component={Master} />
        <Route path="/detail/:id" component={Detail} />
    </Router>
  );
}

function Master() {
  return (
    <div>

      /*
        Everytime the Load More button is pressed it makes a call to a service and gets some data to append to the list
      */
      {someArray.map(item => (

           <MyItem key={item.id} dataObject={post} onClick="this.goToDetailPage" />

        ))}

      <Button>Load 10 More</Button>
    </div>
  );
}


function Detail() {
  return (
    <div>

     /*
        Show some detail information here. There should be a back button to transition back to the master page.
     */
    </div>
  );
}


export default BasicExample;

Answer 1

From what I understand, you want the state to persist even if the page is no longer in view. The simplest method I can think of to achieve this is to simply always keep the Master page rendered but put display: none on it when the detail page is to be rendered.

Another method would be to store the Master state in a global state management system like redux, so even if the local state of the component is gone you can still persist the redux state and use that instead.

And finally you could store the state of your application in localStorage and then restore your state from it in the constructor of your Master page.