Skip to content

Emhancement: Scroll restoration writes to sessionStorage on every scroll event #7293

Description

@dnyaneshwari44

Is your feature request related to a problem? Please describe.

Description

Summary

The ScrollRestoration component currently writes the user's scroll position to sessionStorage on every scroll event.

Since scroll events fire very frequently during user interaction, this results in repeated synchronous sessionStorage.setItem() calls throughout the scrolling lifecycle. This may introduce unnecessary overhead and affect scrolling smoothness, particularly on slower devices or pages with long content.


Affected File

  • app/components/ScrollRestoration.tsx

Affected Component

  • ScrollRestoration

Steps to Reproduce

  1. Open any page with enough content to scroll.
  2. Open Chrome DevTools.
  3. Navigate to the Performance tab.
  4. Start recording.
  5. Scroll continuously for several seconds.
  6. Stop the recording.
  7. Inspect the timeline and observe repeated storage write operations during scrolling.

Current Behavior

  • Every scroll event triggers a sessionStorage.setItem() call.
  • Storage writes occur continuously while scrolling.
  • No throttling or debouncing mechanism is applied.

Describe the solution you'd like

Expected Behavior

Scroll position should be persisted efficiently while minimizing unnecessary storage writes during continuous scrolling.

Describe alternatives you've considered

Evidence

The component registers a scroll event listener:

window.addEventListener("scroll", handleScroll);

Within the event handler, the current scroll position is written directly to sessionStorage:

sessionStorage.setItem(...)

According to the current implementation (app/components/ScrollRestoration.tsx:20-25), this write operation occurs every time the scroll event is triggered without any throttling or debouncing.

Metadata

Metadata

Labels

enhancementNew feature or request

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions