Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

useScrollPosition re-attaches its scroll listener on every frame while scrolling

Open Beginner friendly
  • Is something wrong?
#8,142 1 comment 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 2 days

@ayushgade06 is already working on this.

Since Sep 29, 2026.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript, react
Domain
frontend, performance

Research direction

Start in src/components/Animated-steps-list/scroll-position.js and inspect how the useScrollPosition effect stores ticking and binds the scroll listener. Keep the listener attached for the component lifetime, use non-state bookkeeping for the animation-frame gate, and retain the scroll position in state. Verify with React DevTools or listener instrumentation that renders and add/remove cycles no longer occur on every frame while scrolling.

Written by the indexing model from the issue text.

Description

framework/gatsby help wanted kind/bug

Description

The useScrollPosition hook in [src/components/Animated-steps-list/scroll-position.js](https://github.com/layer5io/layer5/blob/master/src/components/Animated-steps-list/scroll-position.js) drives the scroll-scrubbed terminal animation on the [Meshery Getting Started page].

The hook uses requestAnimationFrame throttling with a ticking flag, but the flag is stored in React state and included in the effect's dependency array.

Because ticking changes from false to true and back on every animation frame:

  • The state changes trigger unnecessary React re-renders.
  • The effect re-runs whenever ticking changes.
  • Its cleanup removes the scroll listener and its setup immediately adds it again.

During scrolling, this can cause the listener to be detached and re-attached roughly 60 times per second, creating unnecessary main-thread work during an interaction where responsiveness matters.

This does not currently cause visible breakage. It is a performance and correctness issue.

This is a reusable hook in the general-purpose components/ folder with the generic name useScrollPosition. If it is reused elsewhere in the future, the same listener thrashing and unnecessary re-renders would be introduced automatically. Fixing it now prevents the issue from silently spreading to other pages.

Expected Behavior

The scroll listener should:

  • Be attached once when the component mounts.
  • Remain attached throughout the component's lifetime.
  • Be removed once when the component unmounts.
  • Throttle updates to roughly one per animation frame without causing extra re-renders.
  • Use a passive scroll listener.

Proposed Changes

Both options address the same two issues:

  1. Change the effect dependency array to [] so the listener is not re-bound when the throttle flag changes.
  2. Remove ticking from React state so internal throttle bookkeeping does not trigger re-renders.

The scroll position should remain in state because the UI depends on it.

Option 1: Local Variable

Use a plain variable scoped inside the effect to track whether an animation-frame update is already scheduled.

The variable changes synchronously, causes no re-render, and is discarded when the effect is cleaned up.

Option 2: useRef

Store the ticking flag in a useRef instead of state.

A ref can be updated synchronously without triggering a re-render, making it suitable for a throttle gate while keeping the flag explicitly named.

If we want a lazy fix we can go with option 1 or else option 2

Reasoning

The dependency array is the main cause of the listener thrashing. Since ticking changes every frame, including it as an effect dependency causes the effect's cleanup and setup to run repeatedly.

Using [] makes the listener bind once for the component's lifetime.

The throttle flag also does not belong in state because it is internal bookkeeping that the UI does not depend on. State changes trigger renders, while a local variable or ref updates synchronously so the next scroll event immediately sees the throttle state.

Impact

This change would:

  • Eliminate roughly 60 unnecessary listener add/remove cycles per second while scrolling.
  • Reduce unnecessary re-renders caused by the throttle flag.
  • Keep only the scroll-position update responsible for UI re-renders.
  • Prevent the same performance issue from being propagated if the reusable hook is adopted elsewhere.
  • Potentially improve scrolling responsiveness, particularly on mobile and lower-end devices.

There should be no visible behavioral change to the animation.

Screenshots

N/A. There is no visible UI change.

The behavior can be verified using React DevTools by observing render counts, or by instrumenting the scroll listener to confirm that it is no longer repeatedly added and removed during scrolling.

Environment

  • Host OS: code-level issue
  • Browser: All
Dominant language
JavaScript
Stars
1.1k
Forks
1.6k
Avg merge
3d 8h
Merged PRs (30d)
29

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from layer5io/layer5

All issues in layer5io/layer5

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.