Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン 初心者向け
  • 何か問題がありますか？
#8,142 コメント 1 件 リアクション 0 件 担当者 1 名 GitHub で見る

メンテナーはふだん 2 日以内に返信

@ayushgade06 がすでに取り組んでいます。

2026年9月29日 から。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript, react
領域
frontend, performance

調査の方向性

src/components/Animated-steps-list/scroll-position.js から始め、useScrollPosition エフェクトが ticking をどのように保存し、scroll リスナーをバインドしているかを調べます。コンポーネントのライフタイム全体にわたってリスナーをアタッチしたままにし、アニメーションフレームのゲートには state を使わないブックキーピングを使用し、scroll 位置は state に保持します。React DevTools またはリスナーのインストルメンテーションを使って、スクロール中にレンダーと追加/削除のサイクルが毎フレーム発生しなくなったことを確認します。

索引モデルが issue の本文から書いたものです。

説明

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
主要言語
JavaScript
スター
1.1k
フォーク
1.6k
平均マージ
3日 23時間
マージ済み PR（30日）
34

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

layer5io/layer5 のほかの issue

layer5io/layer5 の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。