Lose scroll position on history back

[garthenweb]

Consider a Sticky component on a SPA. The content within the element is dynamic and changes when navigating from one page to another.

On page switch the component updates as soon as it's re-rendered as expected. But on history back, if a link below the component was clicked, the height during the scroll restoration will only update after the new elements are rendered and the application updates.

Possibly we have to update the height within a useLayoutEffect instead of useEffect to apply during the initial commit/ before the user sees the rendered result.

It's possibly to work around this problem by resetting a key on the Sticky component. This would lead to remounting the component, by default not height would be set. But this comes with a higher performance impact. Therefore a native solution would be best.