Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

124
Views
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

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!