My problem that I'm not sure how to solve is that I have a table with data, each row has a details button which navigates to a detailed page. We have a custom back arrow component that we can click and we go back to the given link:

const BackArrow = ({ link }) => {
  const history = useHistory();

  const handleClick = () => {
    history.push(link);
  };

  return (
    <IconButton className="back-arrow" onClick={handleClick}>
      <ArrowBackIcon />
    </IconButton>
  );
};

 <BackArrow link="/some-link" />

It works perfectly except one major thing. Not user-friendly and has a great performance issue.

The table we load is an array that initially grab 25 object randomly and on load more we can load 25 more.

The problem is when we click on the details button in one of the rows we navigate to the detail-page, and then we click the back arrow as you can see above we load a link which is the link of the page we navigated away from. This triggers a new request for the table so it will load 25 row, but different ones.. The performance issue is quite obvious, every time we go back it fetch the data. It is also not use friendly, because whenever the user checks out a detailed-page and goes back the rows are changing so he loses the state he navigated from.

I console logged the current, and prevState for the table and it has the data. Initial page load: current State is an array of 25 object, prev is null. We go to a detail than press back arrow, the current state is a new array if 25 object, but now we can see that the prevState has that other 25set of object we had before navigating away.

How can I modify the backarrow function so when it navigates back to a page it uses the state we navigated away from? so in this case the prevState?