I want to store scrollbar instance

[blitzve0]

Summary
Hi, I am using this on ReactJS and I need to store scrollbar instance for use outside useEffect function.

Problem
I want to reset the scroll position when I change/Switch Page. Currently If if change page then scroll position is not changing

Current Solution
I am storing instance in useState Hook but it can be very dangerous as it will cause huge performance issues if there is too much data in the instance and I have used this Component on more than 40+ Pages

HELP WANTED
Option 1 : What is the optimal way to store this instance without causing Performance Degrading
Option 2 : Another Trick to reset Scroll Position on Page Switch
Any Solution is Appreciated

[idiotWu]

Not familiar with react, but I don't think keeping a reference to the scrollbar instance will consume too much memory because the instance always exists unless you destroy the scrollbar via .destroy() method.

Regarding your code, as the scrollbar is constructed when router changes, I think we can simplify it as:

useLayoutEffect(() => {
  const scrollbar = Scrollbar.init(...);

  scrollbar.setPosition(0, 0); // you can use `.setPosition(0, 0)` instead of `.scrollTo(0, 0, 0)` to reset position

  return () => scrollbar.destroy(); // destroy it if necessary
}, [router]);

[blitzve0]

Oh Ok I Understood , When needed , Instead of storing a copy of it, i will just set a reference to it with useRef. This setup will work fine for resetting position. Thanks Again 🎊🥳

[idiotWu]

IMO useState() will just work as expected – only the reference to the instance is saved when calling setScrollbar(scrollbarInstance).

[blitzve0]

The above solution worked, now I don't need to store it 🥳