Scroll restoration in Remix vs React Router

[benmccann]

I'm curious why Remix has a ScrollRestoration component because the React Router docs say that it's generally not necessary to do anything special and the browser will handle it.

Are there certain cases that the ScrollRestoration component is needed or that the browser / React Router can't handle? I'm curious if the team is rethinking the way that React Router handles things because of some problems that were discovered with it?

[remkl]

Was curious about this too. Not sure if the docs got updated after this question was posted, but the remix docs for ScrollRestoration mention that it's for specifically solving the "scroll flash" problem.

The problem is if you refresh a site or go back from a different domain, there is a brief period of time where the scroll is at the top of the page, and then after the JS hydrates, the scroll restoration kicks in, and jumps the page to the scroll location creating a little janky experience.

It looks like this component solves that specific flash problem, a lot of sites tend to have. To do that, the docs mention it has to be exactly the last element on the page right before the script tags:

1. So it can run before hydration to avoid the flash
2. At the bottom of the document otherwise the the window isn't tall enough to restore the correct position (as the docs mention)

It's cool there are solutions like this to many of the janky experiences we take for granted 👍