restoring scroll position in react project(hooks)

I have searched a few answers regarding my issue but found one relevant. Unfortunately, it is even on the class component, so I want to restore the scroll position after navigating back on the functional component. Here I will share the source code link on Stackblitz

Answer

There are few issues here.

First:

setPosts(res.data.slice(0, 20), handleScrollPosition());

You see, setter in useState does not have second argument as this.setState() has. But why, can you ask, your handleScrollPosition is called at all?(since you can see it’s called in debugger). The reason is that you’ve written this as handleScrollPosition() so it’s called immediately. To demonstrate my point, if you change it to correct “passing a callback” form:

setPosts(res.data.slice(0, 20), handleScrollPosition);

As you already have in class-based version, you will see it’s never called. Similarly,

[].map(() => {}, 1,2,3,4, handleScrollPosition())

will also call handleScrollPosition() even though obviously [].map() does not process 6th argument.

So what you should do? First, let’s move scroll restoring into separate useEffect:

useEffect(() => {
    const scrollPosition = sessionStorage.getItem("scrollPosition");
    if (scrollPosition) {
      window.scrollTo(0, parseInt(scrollPosition));
      sessionStorage.removeItem("scrollPosition");
    }
}, []);

obviously it did not work well, since it will be called immediately, before data is fetched. So let’s add dependency on posts:

useEffect(() => {...
}, [posts]);

But it will not work correctly, still. The reason is it’s triggered on initial render when posts is empty… so let’s add check “only after posts are loaded”:

useEffect(() => {
  if (posts.length) {
    const scrollPosition = sessionStorage.getItem("scrollPosition");
    if (scrollPosition) {
      window.scrollTo(0, parseInt(scrollPosition));
      sessionStorage.removeItem("scrollPosition");
    }
  }
}, [posts]);

Now it works as expected and restores scroll position.

PS btw, I don’t think that writting position to sessionStorage is the best approach. Working with multiple tabs will make a mess. If speaking without sample code, I’d see alternative by making separate route “also the list but with ID of element we should scroll to”. And then link “back to the list” will target that route, with passing of entity ID you are currently viewing details for.