@aiquants/virtualscroll 3.9.0 → 3.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiquants/virtualscroll",
-  "version": "3.9.0",
+  "version": "3.9.1",
   "description": "High-performance virtual scrolling component for React with variable item heights",
   "sideEffects": [
     "**/*.css"

package/src/VirtualScroll.tsx

@@ -1428,20 +1428,29 @@ const VirtualScrollInner = <T,>(
 
     const [scrollPosition, setScrollPosition] = useState(initialValues.position)
     const [contentSize, setContentSize] = useState<number>(initialValues.total)
-    // 初期位置の index とアンカーは上端揃えの scrollToIndex と同じ位置なので、その位置の上端揃えとして覚えておく
-    const [alignedEdge, setAlignedEdge] = useState<AlignedEdge | null>(() => ((initialScrollAnchor && itemCount > 0) || typeof initialScrollIndex === "number" ? { edge: "start", panePosition: initialValues.position } : null))
+    // 初期位置の index とアンカーは上端揃えの scrollToIndex と同じ位置なので、その位置の上端揃えとして覚えておく。位置 0 から
+    // 始まる一覧も先頭の行の上端に揃っている (位置 0 の行ラッパーは覚えた揃えによらず上端で揃える) ため、同じく覚える。覚えずに
+    // 始めると、先頭へ戻すだけの最初の scrollToIndex (ホストが開いた直後の打鍵で先頭へ戻すなど) が状態を書き、確定を 1 回足す
+    const [alignedEdge, setAlignedEdge] = useState<AlignedEdge | null>(() => ((initialScrollAnchor && itemCount > 0) || typeof initialScrollIndex === "number" || initialValues.position <= EDGE_POSITION_TOLERANCE ? { edge: "start", panePosition: initialValues.position } : null))
     // 状態の同期の写し。手動スクロールのたびに状態へ null を書くと、同じ値でも React が描画を予約し得るため、写しで要否を決める
     const alignedEdgeRef = useRef(alignedEdge)
 
     /**
      * Remembers the alignment that holds at a pane position, or forgets it with `null`: writes the state the items wrapper
-     * snaps with and its synchronous copy.
+     * snaps with and its synchronous copy, only when the edge or the pane position differs from the remembered one.
      *
-     * あるペイン位置で成り立つ揃えを覚える処理 (`null` で忘れる)。行ラッパーが揃えに使う状態と、その同期の写しへ書く。
+     * あるペイン位置で成り立つ揃えを覚える処理 (`null` で忘れる)。行ラッパーが揃えに使う状態と、その同期の写しへ、覚えた揃えと
+     * 辺かペイン位置が違うときだけ書く。
      *
      * @param next - The alignment, or `null` / 揃え (無ければ `null`)
      */
     const rememberAlignedEdge = useCallback((next: AlignedEdge | null): void => {
+        const current = alignedEdgeRef.current
+        // 同じ揃えでも新しいオブジェクトを書けば React は描画を予約する。同じ位置への scrollToIndex (ホストが打鍵ごとに
+        // 先頭へ戻すなど) のたびに確定が 1 回増えるため、辺と位置が同じなら書かない
+        if (current === next || (current !== null && next !== null && current.edge === next.edge && current.panePosition === next.panePosition)) {
+            return
+        }
         alignedEdgeRef.current = next
         setAlignedEdge(next)
     }, [])