react-cool-virtual - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

CHANGELOG.md

 # react-cool-virtual
 
+## 0.7.0
+
+### Minor Changes
+
+- [#376](https://github.com/wellyshen/react-cool-virtual/pull/376) [`744953b`](https://github.com/wellyshen/react-cool-virtual/commit/744953bcafd376c78c8621ebd6421b87b62a3aef) Thanks [@wellyshen](https://github.com/wellyshen)! - feat: use `startItem` instead `startItemIndex` for pre-pending items
+
 ## 0.6.0
@@ -4,0 +10,0 @@

dist/index.cjs.development.js

@@ -229,2 +229,6 @@ 'use strict';
   var measureItems = react.useCallback(function (useCache) {
+    if (useCache === void 0) {
+      useCache = true;
+    }
+
     msDataRef.current.length = itemCount;
@@ -318,3 +322,3 @@
   }, [durationRef, easingFnRef, scrollTo]);
-  var scrollToIndex = react.useCallback(function (val, cb, isReplace) {
+  var scrollToIndex = react.useCallback(function (val, cb, isSync) {
     var _ref4 = isNumber(val) ? {
@@ -331,3 +335,3 @@ index: val
 
-    if (hasDynamicSizeRef.current) measureItems(!isReplace);
+    if (hasDynamicSizeRef.current) measureItems();
     var msData = msDataRef.current;
@@ -348,3 +352,3 @@ var ms = msData[Math.max(0, Math.min(index, msData.length - 1))];
 
-    if (isReplace || align === Align.start || align === Align.auto && scrollOffset + outerSize > end && scrollOffset > start) {
+    if (isSync || align === Align.start || align === Align.auto && scrollOffset + outerSize > end && scrollOffset > start) {
       scrollOffset = totalSize - start <= outerSize ? totalSize - outerSize : start;
@@ -367,4 +371,8 @@ } else if (align === Align.end || align === Align.auto && scrollOffset + outerSize < end && scrollOffset < start) {
     }, function () {
-      if (isReplace || !hasDynamicSizeRef.current) {
+      if (!hasDynamicSizeRef.current) {
         if (cb) cb();
+      } else if (isSync) {
+        requestAnimationFrame(function () {
+          return scrollToIndex(val, cb, isSync);
+        });
       } else {
@@ -380,3 +388,3 @@ setTimeout(function () {
   }, [scrollToIndex]);
-  var startItemIndex = react.useCallback(function (idx, cb) {
+  var startItem = react.useCallback(function (idx, cb) {
     return scrollToIndex(idx, cb, true);
@@ -607,3 +615,3 @@ }, [scrollToIndex]);
     scrollToItem: scrollToItem,
-    startItemIndex: startItemIndex
+    startItem: startItem
   };
@@ -610,0 +618,0 @@ });

dist/index.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r,e,n=require("react");(e=r||(r={})).auto="auto",e.start="start",e.center="center",e.end="end";var t=function(r,e,n,t){for(;r<=e;){var u=(r+e)/2|0,c=t(u);if(n<c)e=u-1;else{if(!(n>c))return u;r=u+1}}return 0<r?r-1:0},u=function(r){return"number"==typeof r&&!Number.isNaN(r)},c=function(){return"performance"in window?performance.now():Date.now()},i=function(r){var e=n.useRef(r);return e.current=r,e},o="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;exports.default=function(e){var a=e.itemCount,s=e.ssrItemCount,l=e.itemSize,f=void 0===l?50:l;l=e.horizontal;var d=e.resetScroll,v=e.overscanCount,h=void 0===v?1:v;v=e.useIsScrolling;var m=e.stickyIndices,g=e.scrollDuration;g=void 0===g?function(r){return Math.min(Math.max(.075*r,100),500)}:g;var S=e.scrollEasingFunction;S=void 0===S?function(r){return-(Math.cos(Math.PI*r)-1)/2}:S;var b=e.loadMoreCount,R=void 0===b?15:b;b=e.isItemLoaded;var x=e.loadMore,p=e.onScroll;e=e.onResize;var M=n.useState((function(){return function(r,e){void 0===e&&(e=0);var n=u(e)?[0,e-1]:e;e=n[1];var t=[];for(n=n[0];n<=e;n+=1)t.push({index:n,start:0,width:0,size:u(r)?r:r(n,0),measureRef:function(){return null}});return{items:t}}(f,s)})),w=M[0],z=M[1],C=n.useRef(!1),I=n.useRef(!0),k=n.useRef(!1),y=n.useRef(!1),A=n.useRef(new Map),F=n.useRef(0),O=n.useRef(-1),E=n.useRef(-1),L=n.useRef(null),T=n.useRef(null),q=n.useRef({width:0,height:0}),j=n.useRef([]),N=n.useRef(!0),D=n.useRef(),P=i(m),_=i(g),B=i(S),G=i(b),H=i(x),J=i(f),K=i(v),Q=i(p),U=i(e),V=l?"width":"height",W=l?"marginLeft":"marginTop",X=l?"scrollLeft":"scrollTop",Y=n.useCallback((function(r){var e=J.current;return u(e)?e:e(r,q.current.width)}),[J]),Z=n.useCallback((function(r,e){var n,t,u=null!=(n=null==(t=j.current[r-1])?void 0:t.end)?n:0;return{idx:r,start:u,end:u+e,size:e}}),[]),$=n.useCallback((function(r){j.current.length=a;for(var e=0;e<a;e+=1)j.current[e]=Z(e,r&&j.current[e]?j.current[e].size:Y(e))}),[Y,Z,a]),rr=n.useCallback((function(r){var e=j.current,n=e.length-1,u=0;if(y.current)for(;u<n&&e[u].start+e[u].size<r;)u+=1;else u=t(0,n,r,(function(r){return e[r].start}));for(var c=u,i=e[c].start;c<n&&i<r+q.current[V];)i+=e[c].size,c+=1;c=c===n?c:c-1,r=Math.max(u-h,0),i=Math.min(c+h,n);var o=e[r].start;return{oStart:r,oStop:i,vStart:u,vStop:c,innerMargin:o,innerSize:(n=Math[i<n?"max":"min"](e[i].end+e[i].size,e[n].end))-o}}),[h,V]),er=n.useCallback((function(r,e){void 0===e&&(e=!0),L.current&&(N.current=!1,I.current=e,L.current[X]=r)}),[X]),nr=n.useCallback((function(r,e){var n=(r=u(r)?{offset:r}:r).offset;if(r=r.smooth,u(n))if(r){var t=F.current,i=c();D.current=requestAnimationFrame((function r(){var o=_.current;o=u(o)?o:o(Math.abs(n-t)),o=Math.min((c()-i)/o,1);var a=B.current(o);er(a*(n-t)+t),1>o?D.current=requestAnimationFrame(r):e&&e()}))}else er(n),e&&e()}),[_,B,er]),tr=n.useCallback((function(e,n,t){var c=u(e)?{index:e}:e,i=c.index,o=c.align;if(o=void 0===o?r.auto:o,c=c.smooth,u(i)){k.current=!0,y.current&&$(!t);var a=j.current,s=a[Math.max(0,Math.min(i,a.length-1))];if(s){i=s.start;var l=s.end;s=s.size,a=a[a.length-1].end;var f=q.current[V],d=F.current;a<=f?n&&n():(t||o===r.start||o===r.auto&&d+f>l&&d>i?d=a-i<=f?a-f:i:o===r.end||o===r.auto&&d+f<l&&d<i?d=i+s<=f?0:i-f+s:o===r.center&&i+s/2>f/2&&(d=a-(o=i-f/2+s/2)<=f?a-f:o),y.current&&1>=Math.abs(d-F.current)?n&&n():nr({offset:d,smooth:c},(function(){t||!y.current?n&&n():setTimeout((function(){return tr(e,n)}))})))}}}),[$,nr,V]);l=n.useCallback((function(r,e){return tr(r,e)}),[tr]),e=n.useCallback((function(r,e){return tr(r,e,!0)}),[tr]),v=function(r,e){var t=n.useRef(),u=i(r),o=n.useCallback((function(){t.current&&(cancelAnimationFrame(t.current),t.current=void 0)}),[]),a=n.useCallback((function(r){c()-r>=e?u.current():t.current=requestAnimationFrame((function(){return a(r)}))}),[u,e]);return[n.useCallback((function(){o(),a(c())}),[o,a]),o]}((function(){return ir(F.current)}),150);var ur=v[0],cr=v[1],ir=n.useCallback((function(r,e,n){if(!H.current||C.current||G.current&&G.current(0)||H.current({startIndex:0,stopIndex:R-1,loadIndex:0,scrollOffset:r,userScroll:!1}),a){var u=rr(r),c=u.oStart,i=u.oStop,o=u.vStart,s=u.vStop,l=u.innerMargin,f=u.innerSize,d=[],v=Array.isArray(P.current)?P.current:[];u=function(t){var u=j.current,c=u[t],i=c.start,o=c.size;d.push({index:t,start:i-l,size:o,width:q.current.width,isScrolling:n||void 0,isSticky:v.includes(t)||void 0,measureRef:function(c){c&&new ResizeObserver((function(c,a){var s,l,f,d=(c=c[0].target).getBoundingClientRect()[V];if(d){var v=null!=(s=null==(l=u[t-1])?void 0:l.end)?s:0;d===o&&i===v||(t<O.current&&i<r&&er(r+d-o,!1),j.current[t]=Z(t,d),k.current||ir(F.current,e,n),y.current=!0),O.current=t,null==(f=A.current.get(c))||f.disconnect(),A.current.set(c,a)}else a.disconnect(),A.current.delete(c)})).observe(c)}})};for(var h=c;h<=i;h+=1)u(h);v.length&&(c>(u=v[t(0,v.length-1,o,(function(r){return v[r]}))])&&(h=j.current[u].size,d.unshift({index:u,start:0,size:h,width:q.current.width,isScrolling:n||void 0,isSticky:!0,measureRef:function(){return null}}),l-=h,f+=h)),z((function(r){return function(r,e,n){if(r.length!==e.length)return!0;for(var t=function(t){if(Object.keys(r[t]).some((function(u){return!n[u]&&r[t][u]!==e[t][u]})))return{v:!0}},u=0;u<r.length;u+=1){var c=t(u);if("object"==typeof c)return c.v}return!1}(r.items,d,{measureRef:!0})?{items:d,innerMargin:l,innerSize:f}:r})),e&&(u=r>F.current,Q.current&&Q.current({overscanStartIndex:c,overscanStopIndex:i,visibleStartIndex:o,visibleStopIndex:s,scrollOffset:r,scrollForward:u,userScroll:N.current}),i=(c=Math.max(Math.floor((s+1)/R)-(u?0:1),0))*R,!H.current||s===E.current||G.current&&G.current(c)||H.current({startIndex:i,stopIndex:i+R-1,loadIndex:c,scrollOffset:r,userScroll:N.current}),n&&ur(),E.current=s)}else z({items:[]})}),[P,rr,Z,a,R,H,Q,ur,er,V,G]);return function(r,e,n){var t=i(e);o((function(){if(null==r||!r.current)return function(){return null};var e=new ResizeObserver((function(r){r=r[0].contentRect,t.current({width:r.width,height:r.height})}));return e.observe(r.current),function(){return e.disconnect()}}),[t,r].concat(n))}(L,(function(r){var e,n=q.current,t=n.height;t=(n=n.width===r.width)&&t===r.height;var u=j.current.length,c=null==(e=j.current[u-1])?void 0:e.end;if(q.current=r,$(y.current),ir(F.current),d&&a!==u&&setTimeout((function(){return er(0,!1)})),C.current){var i;if(!y.current&&!n)e=null==(i=j.current[j.current.length-1])?void 0:i.end,er(F.current*(e/c||1),!1);!t&&U.current&&U.current(r)}else C.current=!0}),[a,d,ir,$,U,er]),o((function(){T.current&&(u(w.innerMargin)&&(T.current.style[W]=w.innerMargin+"px"),u(w.innerSize)&&(T.current.style[V]=w.innerSize+"px"))}),[W,V,w.innerMargin,w.innerSize]),o((function(){var r=L.current;if(!r)return function(){return null};var e=function(r){if((r=r.target[X])!==F.current){var e=K.current;e="function"==typeof e?e(Math.abs(r-F.current)):e,ir(r,I.current,e),N.current=!0,I.current=!0,k.current=!1,F.current=r}};r.addEventListener("scroll",e,{passive:!0});var n=A.current;return function(){cr(),D.current&&(cancelAnimationFrame(D.current),D.current=void 0),r.removeEventListener("scroll",e),n.forEach((function(r){return r.disconnect()})),n.clear()}}),[cr,ir,X,K]),{outerRef:L,innerRef:T,items:w.items,scrollTo:nr,scrollToItem:l,startItemIndex:e}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r,e,n=require("react");(e=r||(r={})).auto="auto",e.start="start",e.center="center",e.end="end";var t=function(r,e,n,t){for(;r<=e;){var u=(r+e)/2|0,c=t(u);if(n<c)e=u-1;else{if(!(n>c))return u;r=u+1}}return 0<r?r-1:0},u=function(r){return"number"==typeof r&&!Number.isNaN(r)},c=function(){return"performance"in window?performance.now():Date.now()},i=function(r){var e=n.useRef(r);return e.current=r,e},o="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;exports.default=function(e){var a=e.itemCount,s=e.ssrItemCount,l=e.itemSize,f=void 0===l?50:l;l=e.horizontal;var v=e.resetScroll,d=e.overscanCount,h=void 0===d?1:d;d=e.useIsScrolling;var m=e.stickyIndices,g=e.scrollDuration;g=void 0===g?function(r){return Math.min(Math.max(.075*r,100),500)}:g;var S=e.scrollEasingFunction;S=void 0===S?function(r){return-(Math.cos(Math.PI*r)-1)/2}:S;var b=e.loadMoreCount,R=void 0===b?15:b;b=e.isItemLoaded;var p=e.loadMore,x=e.onScroll;e=e.onResize;var M=n.useState((function(){return function(r,e){void 0===e&&(e=0);var n=u(e)?[0,e-1]:e;e=n[1];var t=[];for(n=n[0];n<=e;n+=1)t.push({index:n,start:0,width:0,size:u(r)?r:r(n,0),measureRef:function(){return null}});return{items:t}}(f,s)})),w=M[0],z=M[1],C=n.useRef(!1),k=n.useRef(!0),I=n.useRef(!1),y=n.useRef(!1),A=n.useRef(new Map),F=n.useRef(0),O=n.useRef(-1),E=n.useRef(-1),L=n.useRef(null),T=n.useRef(null),q=n.useRef({width:0,height:0}),j=n.useRef([]),N=n.useRef(!0),D=n.useRef(),P=i(m),_=i(g),B=i(S),G=i(b),H=i(p),J=i(f),K=i(d),Q=i(x),U=i(e),V=l?"width":"height",W=l?"marginLeft":"marginTop",X=l?"scrollLeft":"scrollTop",Y=n.useCallback((function(r){var e=J.current;return u(e)?e:e(r,q.current.width)}),[J]),Z=n.useCallback((function(r,e){var n,t,u=null!=(n=null==(t=j.current[r-1])?void 0:t.end)?n:0;return{idx:r,start:u,end:u+e,size:e}}),[]),$=n.useCallback((function(r){void 0===r&&(r=!0),j.current.length=a;for(var e=0;e<a;e+=1)j.current[e]=Z(e,r&&j.current[e]?j.current[e].size:Y(e))}),[Y,Z,a]),rr=n.useCallback((function(r){var e=j.current,n=e.length-1,u=0;if(y.current)for(;u<n&&e[u].start+e[u].size<r;)u+=1;else u=t(0,n,r,(function(r){return e[r].start}));for(var c=u,i=e[c].start;c<n&&i<r+q.current[V];)i+=e[c].size,c+=1;c=c===n?c:c-1,r=Math.max(u-h,0),i=Math.min(c+h,n);var o=e[r].start;return{oStart:r,oStop:i,vStart:u,vStop:c,innerMargin:o,innerSize:(n=Math[i<n?"max":"min"](e[i].end+e[i].size,e[n].end))-o}}),[h,V]),er=n.useCallback((function(r,e){void 0===e&&(e=!0),L.current&&(N.current=!1,k.current=e,L.current[X]=r)}),[X]),nr=n.useCallback((function(r,e){var n=(r=u(r)?{offset:r}:r).offset;if(r=r.smooth,u(n))if(r){var t=F.current,i=c();D.current=requestAnimationFrame((function r(){var o=_.current;o=u(o)?o:o(Math.abs(n-t)),o=Math.min((c()-i)/o,1);var a=B.current(o);er(a*(n-t)+t),1>o?D.current=requestAnimationFrame(r):e&&e()}))}else er(n),e&&e()}),[_,B,er]),tr=n.useCallback((function(e,n,t){var c=u(e)?{index:e}:e,i=c.index,o=c.align;if(o=void 0===o?r.auto:o,c=c.smooth,u(i)){I.current=!0,y.current&&$();var a=j.current,s=a[Math.max(0,Math.min(i,a.length-1))];if(s){i=s.start;var l=s.end;s=s.size,a=a[a.length-1].end;var f=q.current[V],v=F.current;a<=f?n&&n():(t||o===r.start||o===r.auto&&v+f>l&&v>i?v=a-i<=f?a-f:i:o===r.end||o===r.auto&&v+f<l&&v<i?v=i+s<=f?0:i-f+s:o===r.center&&i+s/2>f/2&&(v=a-(o=i-f/2+s/2)<=f?a-f:o),y.current&&1>=Math.abs(v-F.current)?n&&n():nr({offset:v,smooth:c},(function(){y.current?t?requestAnimationFrame((function(){return tr(e,n,t)})):setTimeout((function(){return tr(e,n)})):n&&n()})))}}}),[$,nr,V]);l=n.useCallback((function(r,e){return tr(r,e)}),[tr]),e=n.useCallback((function(r,e){return tr(r,e,!0)}),[tr]),d=function(r,e){var t=n.useRef(),u=i(r),o=n.useCallback((function(){t.current&&(cancelAnimationFrame(t.current),t.current=void 0)}),[]),a=n.useCallback((function(r){c()-r>=e?u.current():t.current=requestAnimationFrame((function(){return a(r)}))}),[u,e]);return[n.useCallback((function(){o(),a(c())}),[o,a]),o]}((function(){return ir(F.current)}),150);var ur=d[0],cr=d[1],ir=n.useCallback((function(r,e,n){if(!H.current||C.current||G.current&&G.current(0)||H.current({startIndex:0,stopIndex:R-1,loadIndex:0,scrollOffset:r,userScroll:!1}),a){var u=rr(r),c=u.oStart,i=u.oStop,o=u.vStart,s=u.vStop,l=u.innerMargin,f=u.innerSize,v=[],d=Array.isArray(P.current)?P.current:[];u=function(t){var u=j.current,c=u[t],i=c.start,o=c.size;v.push({index:t,start:i-l,size:o,width:q.current.width,isScrolling:n||void 0,isSticky:d.includes(t)||void 0,measureRef:function(c){c&&new ResizeObserver((function(c,a){var s,l,f,v=(c=c[0].target).getBoundingClientRect()[V];if(v){var d=null!=(s=null==(l=u[t-1])?void 0:l.end)?s:0;v===o&&i===d||(t<O.current&&i<r&&er(r+v-o,!1),j.current[t]=Z(t,v),I.current||ir(F.current,e,n),y.current=!0),O.current=t,null==(f=A.current.get(c))||f.disconnect(),A.current.set(c,a)}else a.disconnect(),A.current.delete(c)})).observe(c)}})};for(var h=c;h<=i;h+=1)u(h);d.length&&(c>(u=d[t(0,d.length-1,o,(function(r){return d[r]}))])&&(h=j.current[u].size,v.unshift({index:u,start:0,size:h,width:q.current.width,isScrolling:n||void 0,isSticky:!0,measureRef:function(){return null}}),l-=h,f+=h)),z((function(r){return function(r,e,n){if(r.length!==e.length)return!0;for(var t=function(t){if(Object.keys(r[t]).some((function(u){return!n[u]&&r[t][u]!==e[t][u]})))return{v:!0}},u=0;u<r.length;u+=1){var c=t(u);if("object"==typeof c)return c.v}return!1}(r.items,v,{measureRef:!0})?{items:v,innerMargin:l,innerSize:f}:r})),e&&(u=r>F.current,Q.current&&Q.current({overscanStartIndex:c,overscanStopIndex:i,visibleStartIndex:o,visibleStopIndex:s,scrollOffset:r,scrollForward:u,userScroll:N.current}),i=(c=Math.max(Math.floor((s+1)/R)-(u?0:1),0))*R,!H.current||s===E.current||G.current&&G.current(c)||H.current({startIndex:i,stopIndex:i+R-1,loadIndex:c,scrollOffset:r,userScroll:N.current}),n&&ur(),E.current=s)}else z({items:[]})}),[P,rr,Z,a,R,H,Q,ur,er,V,G]);return function(r,e,n){var t=i(e);o((function(){if(null==r||!r.current)return function(){return null};var e=new ResizeObserver((function(r){r=r[0].contentRect,t.current({width:r.width,height:r.height})}));return e.observe(r.current),function(){return e.disconnect()}}),[t,r].concat(n))}(L,(function(r){var e,n=q.current,t=n.height;t=(n=n.width===r.width)&&t===r.height;var u=j.current.length,c=null==(e=j.current[u-1])?void 0:e.end;if(q.current=r,$(y.current),ir(F.current),v&&a!==u&&setTimeout((function(){return er(0,!1)})),C.current){var i;if(!y.current&&!n)e=null==(i=j.current[j.current.length-1])?void 0:i.end,er(F.current*(e/c||1),!1);!t&&U.current&&U.current(r)}else C.current=!0}),[a,v,ir,$,U,er]),o((function(){T.current&&(u(w.innerMargin)&&(T.current.style[W]=w.innerMargin+"px"),u(w.innerSize)&&(T.current.style[V]=w.innerSize+"px"))}),[W,V,w.innerMargin,w.innerSize]),o((function(){var r=L.current;if(!r)return function(){return null};var e=function(r){if((r=r.target[X])!==F.current){var e=K.current;e="function"==typeof e?e(Math.abs(r-F.current)):e,ir(r,k.current,e),N.current=!0,k.current=!0,I.current=!1,F.current=r}};r.addEventListener("scroll",e,{passive:!0});var n=A.current;return function(){cr(),D.current&&(cancelAnimationFrame(D.current),D.current=void 0),r.removeEventListener("scroll",e),n.forEach((function(r){return r.disconnect()})),n.clear()}}),[cr,ir,X,K]),{outerRef:L,innerRef:T,items:w.items,scrollTo:nr,scrollToItem:l,startItem:e}};
 //# sourceMappingURL=index.cjs.production.min.js.map

dist/index.d.ts

@@ -98,3 +98,3 @@ declare module "react-cool-virtual" {
 
-  export interface StartItemIndex {
+  export interface StartItem {
     (index: number, callback?: () => void): void;
@@ -130,3 +130,3 @@ }
     scrollToItem: ScrollToItem;
-    startItemIndex: StartItemIndex;
+    startItem: StartItem;
   }
@@ -133,0 +133,0 @@

dist/index.esm.js

@@ -225,2 +225,6 @@ import { useRef, useCallback, useLayoutEffect, useEffect, useState } from 'react';
   var measureItems = useCallback(function (useCache) {
+    if (useCache === void 0) {
+      useCache = true;
+    }
+
     msDataRef.current.length = itemCount;
@@ -314,3 +318,3 @@
   }, [durationRef, easingFnRef, scrollTo]);
-  var scrollToIndex = useCallback(function (val, cb, isReplace) {
+  var scrollToIndex = useCallback(function (val, cb, isSync) {
     var _ref4 = isNumber(val) ? {
@@ -327,3 +331,3 @@ index: val
 
-    if (hasDynamicSizeRef.current) measureItems(!isReplace);
+    if (hasDynamicSizeRef.current) measureItems();
     var msData = msDataRef.current;
@@ -344,3 +348,3 @@ var ms = msData[Math.max(0, Math.min(index, msData.length - 1))];
 
-    if (isReplace || align === Align.start || align === Align.auto && scrollOffset + outerSize > end && scrollOffset > start) {
+    if (isSync || align === Align.start || align === Align.auto && scrollOffset + outerSize > end && scrollOffset > start) {
       scrollOffset = totalSize - start <= outerSize ? totalSize - outerSize : start;
@@ -363,4 +367,8 @@ } else if (align === Align.end || align === Align.auto && scrollOffset + outerSize < end && scrollOffset < start) {
     }, function () {
-      if (isReplace || !hasDynamicSizeRef.current) {
+      if (!hasDynamicSizeRef.current) {
         if (cb) cb();
+      } else if (isSync) {
+        requestAnimationFrame(function () {
+          return scrollToIndex(val, cb, isSync);
+        });
       } else {
@@ -376,3 +384,3 @@ setTimeout(function () {
   }, [scrollToIndex]);
-  var startItemIndex = useCallback(function (idx, cb) {
+  var startItem = useCallback(function (idx, cb) {
     return scrollToIndex(idx, cb, true);
@@ -603,3 +611,3 @@ }, [scrollToIndex]);
     scrollToItem: scrollToItem,
-    startItemIndex: startItemIndex
+    startItem: startItem
   };
@@ -606,0 +614,0 @@ });

dist/index.umd.development.js

@@ -229,2 +229,6 @@ (function (global, factory) {
     var measureItems = react.useCallback(function (useCache) {
+      if (useCache === void 0) {
+        useCache = true;
+      }
+
       msDataRef.current.length = itemCount;
@@ -318,3 +322,3 @@
     }, [durationRef, easingFnRef, scrollTo]);
-    var scrollToIndex = react.useCallback(function (val, cb, isReplace) {
+    var scrollToIndex = react.useCallback(function (val, cb, isSync) {
       var _ref4 = isNumber(val) ? {
@@ -331,3 +335,3 @@ index: val
 
-      if (hasDynamicSizeRef.current) measureItems(!isReplace);
+      if (hasDynamicSizeRef.current) measureItems();
       var msData = msDataRef.current;
@@ -348,3 +352,3 @@ var ms = msData[Math.max(0, Math.min(index, msData.length - 1))];
 
-      if (isReplace || align === Align.start || align === Align.auto && scrollOffset + outerSize > end && scrollOffset > start) {
+      if (isSync || align === Align.start || align === Align.auto && scrollOffset + outerSize > end && scrollOffset > start) {
         scrollOffset = totalSize - start <= outerSize ? totalSize - outerSize : start;
@@ -367,4 +371,8 @@ } else if (align === Align.end || align === Align.auto && scrollOffset + outerSize < end && scrollOffset < start) {
       }, function () {
-        if (isReplace || !hasDynamicSizeRef.current) {
+        if (!hasDynamicSizeRef.current) {
           if (cb) cb();
+        } else if (isSync) {
+          requestAnimationFrame(function () {
+            return scrollToIndex(val, cb, isSync);
+          });
         } else {
@@ -380,3 +388,3 @@ setTimeout(function () {
     }, [scrollToIndex]);
-    var startItemIndex = react.useCallback(function (idx, cb) {
+    var startItem = react.useCallback(function (idx, cb) {
       return scrollToIndex(idx, cb, true);
@@ -607,3 +615,3 @@ }, [scrollToIndex]);
       scrollToItem: scrollToItem,
-      startItemIndex: startItemIndex
+      startItem: startItem
     };
@@ -610,0 +618,0 @@ });

dist/index.umd.production.min.js

@@ -1,2 +0,2 @@
-"use strict";!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((r="undefined"!=typeof globalThis?globalThis:r||self).ReactCoolVirtual={},r.React)}(this,(function(r,e){var n,t;(t=n||(n={})).auto="auto",t.start="start",t.center="center",t.end="end";var u=function(r,e,n,t){for(;r<=e;){var u=(r+e)/2|0,c=t(u);if(n<c)e=u-1;else{if(!(n>c))return u;r=u+1}}return 0<r?r-1:0},c=function(r){return"number"==typeof r&&!Number.isNaN(r)},i=function(){return"performance"in window?performance.now():Date.now()},o=function(r){var n=e.useRef(r);return n.current=r,n},a="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;r.useVirtual=function(r){var t=r.itemCount,s=r.ssrItemCount,f=r.itemSize,l=void 0===f?50:f;f=r.horizontal;var d=r.resetScroll,v=r.overscanCount,h=void 0===v?1:v;v=r.useIsScrolling;var m=r.stickyIndices,g=r.scrollDuration;g=void 0===g?function(r){return Math.min(Math.max(.075*r,100),500)}:g;var b=r.scrollEasingFunction;b=void 0===b?function(r){return-(Math.cos(Math.PI*r)-1)/2}:b;var p=r.loadMoreCount,S=void 0===p?15:p;p=r.isItemLoaded;var R=r.loadMore,x=r.onScroll;r=r.onResize;var M=e.useState((function(){return function(r,e){void 0===e&&(e=0);var n=c(e)?[0,e-1]:e;e=n[1];var t=[];for(n=n[0];n<=e;n+=1)t.push({index:n,start:0,width:0,size:c(r)?r:r(n,0),measureRef:function(){return null}});return{items:t}}(l,s)})),w=M[0],z=M[1],C=e.useRef(!1),y=e.useRef(!0),I=e.useRef(!1),k=e.useRef(!1),T=e.useRef(new Map),A=e.useRef(0),F=e.useRef(-1),O=e.useRef(-1),E=e.useRef(null),L=e.useRef(null),j=e.useRef({width:0,height:0}),q=e.useRef([]),N=e.useRef(!0),D=e.useRef(),P=o(m),V=o(g),_=o(b),B=o(p),G=o(R),H=o(l),J=o(v),K=o(x),Q=o(r),U=f?"width":"height",W=f?"marginLeft":"marginTop",X=f?"scrollLeft":"scrollTop",Y=e.useCallback((function(r){var e=H.current;return c(e)?e:e(r,j.current.width)}),[H]),Z=e.useCallback((function(r,e){var n,t,u=null!=(n=null==(t=q.current[r-1])?void 0:t.end)?n:0;return{idx:r,start:u,end:u+e,size:e}}),[]),$=e.useCallback((function(r){q.current.length=t;for(var e=0;e<t;e+=1)q.current[e]=Z(e,r&&q.current[e]?q.current[e].size:Y(e))}),[Y,Z,t]),rr=e.useCallback((function(r){var e=q.current,n=e.length-1,t=0;if(k.current)for(;t<n&&e[t].start+e[t].size<r;)t+=1;else t=u(0,n,r,(function(r){return e[r].start}));for(var c=t,i=e[c].start;c<n&&i<r+j.current[U];)i+=e[c].size,c+=1;c=c===n?c:c-1,r=Math.max(t-h,0),i=Math.min(c+h,n);var o=e[r].start;return{oStart:r,oStop:i,vStart:t,vStop:c,innerMargin:o,innerSize:(n=Math[i<n?"max":"min"](e[i].end+e[i].size,e[n].end))-o}}),[h,U]),er=e.useCallback((function(r,e){void 0===e&&(e=!0),E.current&&(N.current=!1,y.current=e,E.current[X]=r)}),[X]),nr=e.useCallback((function(r,e){var n=(r=c(r)?{offset:r}:r).offset;if(r=r.smooth,c(n))if(r){var t=A.current,u=i();D.current=requestAnimationFrame((function r(){var o=V.current;o=c(o)?o:o(Math.abs(n-t)),o=Math.min((i()-u)/o,1);var a=_.current(o);er(a*(n-t)+t),1>o?D.current=requestAnimationFrame(r):e&&e()}))}else er(n),e&&e()}),[V,_,er]),tr=e.useCallback((function(r,e,t){var u=c(r)?{index:r}:r,i=u.index,o=u.align;if(o=void 0===o?n.auto:o,u=u.smooth,c(i)){I.current=!0,k.current&&$(!t);var a=q.current,s=a[Math.max(0,Math.min(i,a.length-1))];if(s){i=s.start;var f=s.end;s=s.size,a=a[a.length-1].end;var l=j.current[U],d=A.current;a<=l?e&&e():(t||o===n.start||o===n.auto&&d+l>f&&d>i?d=a-i<=l?a-l:i:o===n.end||o===n.auto&&d+l<f&&d<i?d=i+s<=l?0:i-l+s:o===n.center&&i+s/2>l/2&&(d=a-(o=i-l/2+s/2)<=l?a-l:o),k.current&&1>=Math.abs(d-A.current)?e&&e():nr({offset:d,smooth:u},(function(){t||!k.current?e&&e():setTimeout((function(){return tr(r,e)}))})))}}}),[$,nr,U]);f=e.useCallback((function(r,e){return tr(r,e)}),[tr]),r=e.useCallback((function(r,e){return tr(r,e,!0)}),[tr]),v=function(r,n){var t=e.useRef(),u=o(r),c=e.useCallback((function(){t.current&&(cancelAnimationFrame(t.current),t.current=void 0)}),[]),a=e.useCallback((function(r){i()-r>=n?u.current():t.current=requestAnimationFrame((function(){return a(r)}))}),[u,n]);return[e.useCallback((function(){c(),a(i())}),[c,a]),c]}((function(){return ir(A.current)}),150);var ur=v[0],cr=v[1],ir=e.useCallback((function(r,e,n){if(!G.current||C.current||B.current&&B.current(0)||G.current({startIndex:0,stopIndex:S-1,loadIndex:0,scrollOffset:r,userScroll:!1}),t){var c=rr(r),i=c.oStart,o=c.oStop,a=c.vStart,s=c.vStop,f=c.innerMargin,l=c.innerSize,d=[],v=Array.isArray(P.current)?P.current:[];c=function(t){var u=q.current,c=u[t],i=c.start,o=c.size;d.push({index:t,start:i-f,size:o,width:j.current.width,isScrolling:n||void 0,isSticky:v.includes(t)||void 0,measureRef:function(c){c&&new ResizeObserver((function(c,a){var s,f,l,d=(c=c[0].target).getBoundingClientRect()[U];if(d){var v=null!=(s=null==(f=u[t-1])?void 0:f.end)?s:0;d===o&&i===v||(t<F.current&&i<r&&er(r+d-o,!1),q.current[t]=Z(t,d),I.current||ir(A.current,e,n),k.current=!0),F.current=t,null==(l=T.current.get(c))||l.disconnect(),T.current.set(c,a)}else a.disconnect(),T.current.delete(c)})).observe(c)}})};for(var h=i;h<=o;h+=1)c(h);v.length&&(i>(c=v[u(0,v.length-1,a,(function(r){return v[r]}))])&&(h=q.current[c].size,d.unshift({index:c,start:0,size:h,width:j.current.width,isScrolling:n||void 0,isSticky:!0,measureRef:function(){return null}}),f-=h,l+=h)),z((function(r){return function(r,e,n){if(r.length!==e.length)return!0;for(var t=function(t){if(Object.keys(r[t]).some((function(u){return!n[u]&&r[t][u]!==e[t][u]})))return{v:!0}},u=0;u<r.length;u+=1){var c=t(u);if("object"==typeof c)return c.v}return!1}(r.items,d,{measureRef:!0})?{items:d,innerMargin:f,innerSize:l}:r})),e&&(c=r>A.current,K.current&&K.current({overscanStartIndex:i,overscanStopIndex:o,visibleStartIndex:a,visibleStopIndex:s,scrollOffset:r,scrollForward:c,userScroll:N.current}),o=(i=Math.max(Math.floor((s+1)/S)-(c?0:1),0))*S,!G.current||s===O.current||B.current&&B.current(i)||G.current({startIndex:o,stopIndex:o+S-1,loadIndex:i,scrollOffset:r,userScroll:N.current}),n&&ur(),O.current=s)}else z({items:[]})}),[P,rr,Z,t,S,G,K,ur,er,U,B]);return function(r,e,n){var t=o(e);a((function(){if(null==r||!r.current)return function(){return null};var e=new ResizeObserver((function(r){r=r[0].contentRect,t.current({width:r.width,height:r.height})}));return e.observe(r.current),function(){return e.disconnect()}}),[t,r].concat(n))}(E,(function(r){var e,n=j.current,u=n.height;u=(n=n.width===r.width)&&u===r.height;var c=q.current.length,i=null==(e=q.current[c-1])?void 0:e.end;if(j.current=r,$(k.current),ir(A.current),d&&t!==c&&setTimeout((function(){return er(0,!1)})),C.current){var o;if(!k.current&&!n)e=null==(o=q.current[q.current.length-1])?void 0:o.end,er(A.current*(e/i||1),!1);!u&&Q.current&&Q.current(r)}else C.current=!0}),[t,d,ir,$,Q,er]),a((function(){L.current&&(c(w.innerMargin)&&(L.current.style[W]=w.innerMargin+"px"),c(w.innerSize)&&(L.current.style[U]=w.innerSize+"px"))}),[W,U,w.innerMargin,w.innerSize]),a((function(){var r=E.current;if(!r)return function(){return null};var e=function(r){if((r=r.target[X])!==A.current){var e=J.current;e="function"==typeof e?e(Math.abs(r-A.current)):e,ir(r,y.current,e),N.current=!0,y.current=!0,I.current=!1,A.current=r}};r.addEventListener("scroll",e,{passive:!0});var n=T.current;return function(){cr(),D.current&&(cancelAnimationFrame(D.current),D.current=void 0),r.removeEventListener("scroll",e),n.forEach((function(r){return r.disconnect()})),n.clear()}}),[cr,ir,X,J]),{outerRef:E,innerRef:L,items:w.items,scrollTo:nr,scrollToItem:f,startItemIndex:r}},Object.defineProperty(r,"__esModule",{value:!0})}));
+"use strict";!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((r="undefined"!=typeof globalThis?globalThis:r||self).ReactCoolVirtual={},r.React)}(this,(function(r,e){var n,t;(t=n||(n={})).auto="auto",t.start="start",t.center="center",t.end="end";var u=function(r,e,n,t){for(;r<=e;){var u=(r+e)/2|0,i=t(u);if(n<i)e=u-1;else{if(!(n>i))return u;r=u+1}}return 0<r?r-1:0},i=function(r){return"number"==typeof r&&!Number.isNaN(r)},c=function(){return"performance"in window?performance.now():Date.now()},o=function(r){var n=e.useRef(r);return n.current=r,n},a="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;r.useVirtual=function(r){var t=r.itemCount,s=r.ssrItemCount,f=r.itemSize,l=void 0===f?50:f;f=r.horizontal;var d=r.resetScroll,v=r.overscanCount,h=void 0===v?1:v;v=r.useIsScrolling;var m=r.stickyIndices,g=r.scrollDuration;g=void 0===g?function(r){return Math.min(Math.max(.075*r,100),500)}:g;var b=r.scrollEasingFunction;b=void 0===b?function(r){return-(Math.cos(Math.PI*r)-1)/2}:b;var p=r.loadMoreCount,S=void 0===p?15:p;p=r.isItemLoaded;var R=r.loadMore,x=r.onScroll;r=r.onResize;var M=e.useState((function(){return function(r,e){void 0===e&&(e=0);var n=i(e)?[0,e-1]:e;e=n[1];var t=[];for(n=n[0];n<=e;n+=1)t.push({index:n,start:0,width:0,size:i(r)?r:r(n,0),measureRef:function(){return null}});return{items:t}}(l,s)})),w=M[0],z=M[1],C=e.useRef(!1),y=e.useRef(!0),k=e.useRef(!1),I=e.useRef(!1),A=e.useRef(new Map),F=e.useRef(0),T=e.useRef(-1),O=e.useRef(-1),E=e.useRef(null),L=e.useRef(null),q=e.useRef({width:0,height:0}),j=e.useRef([]),N=e.useRef(!0),D=e.useRef(),P=o(m),V=o(g),_=o(b),B=o(p),G=o(R),H=o(l),J=o(v),K=o(x),Q=o(r),U=f?"width":"height",W=f?"marginLeft":"marginTop",X=f?"scrollLeft":"scrollTop",Y=e.useCallback((function(r){var e=H.current;return i(e)?e:e(r,q.current.width)}),[H]),Z=e.useCallback((function(r,e){var n,t,u=null!=(n=null==(t=j.current[r-1])?void 0:t.end)?n:0;return{idx:r,start:u,end:u+e,size:e}}),[]),$=e.useCallback((function(r){void 0===r&&(r=!0),j.current.length=t;for(var e=0;e<t;e+=1)j.current[e]=Z(e,r&&j.current[e]?j.current[e].size:Y(e))}),[Y,Z,t]),rr=e.useCallback((function(r){var e=j.current,n=e.length-1,t=0;if(I.current)for(;t<n&&e[t].start+e[t].size<r;)t+=1;else t=u(0,n,r,(function(r){return e[r].start}));for(var i=t,c=e[i].start;i<n&&c<r+q.current[U];)c+=e[i].size,i+=1;i=i===n?i:i-1,r=Math.max(t-h,0),c=Math.min(i+h,n);var o=e[r].start;return{oStart:r,oStop:c,vStart:t,vStop:i,innerMargin:o,innerSize:(n=Math[c<n?"max":"min"](e[c].end+e[c].size,e[n].end))-o}}),[h,U]),er=e.useCallback((function(r,e){void 0===e&&(e=!0),E.current&&(N.current=!1,y.current=e,E.current[X]=r)}),[X]),nr=e.useCallback((function(r,e){var n=(r=i(r)?{offset:r}:r).offset;if(r=r.smooth,i(n))if(r){var t=F.current,u=c();D.current=requestAnimationFrame((function r(){var o=V.current;o=i(o)?o:o(Math.abs(n-t)),o=Math.min((c()-u)/o,1);var a=_.current(o);er(a*(n-t)+t),1>o?D.current=requestAnimationFrame(r):e&&e()}))}else er(n),e&&e()}),[V,_,er]),tr=e.useCallback((function(r,e,t){var u=i(r)?{index:r}:r,c=u.index,o=u.align;if(o=void 0===o?n.auto:o,u=u.smooth,i(c)){k.current=!0,I.current&&$();var a=j.current,s=a[Math.max(0,Math.min(c,a.length-1))];if(s){c=s.start;var f=s.end;s=s.size,a=a[a.length-1].end;var l=q.current[U],d=F.current;a<=l?e&&e():(t||o===n.start||o===n.auto&&d+l>f&&d>c?d=a-c<=l?a-l:c:o===n.end||o===n.auto&&d+l<f&&d<c?d=c+s<=l?0:c-l+s:o===n.center&&c+s/2>l/2&&(d=a-(o=c-l/2+s/2)<=l?a-l:o),I.current&&1>=Math.abs(d-F.current)?e&&e():nr({offset:d,smooth:u},(function(){I.current?t?requestAnimationFrame((function(){return tr(r,e,t)})):setTimeout((function(){return tr(r,e)})):e&&e()})))}}}),[$,nr,U]);f=e.useCallback((function(r,e){return tr(r,e)}),[tr]),r=e.useCallback((function(r,e){return tr(r,e,!0)}),[tr]),v=function(r,n){var t=e.useRef(),u=o(r),i=e.useCallback((function(){t.current&&(cancelAnimationFrame(t.current),t.current=void 0)}),[]),a=e.useCallback((function(r){c()-r>=n?u.current():t.current=requestAnimationFrame((function(){return a(r)}))}),[u,n]);return[e.useCallback((function(){i(),a(c())}),[i,a]),i]}((function(){return cr(F.current)}),150);var ur=v[0],ir=v[1],cr=e.useCallback((function(r,e,n){if(!G.current||C.current||B.current&&B.current(0)||G.current({startIndex:0,stopIndex:S-1,loadIndex:0,scrollOffset:r,userScroll:!1}),t){var i=rr(r),c=i.oStart,o=i.oStop,a=i.vStart,s=i.vStop,f=i.innerMargin,l=i.innerSize,d=[],v=Array.isArray(P.current)?P.current:[];i=function(t){var u=j.current,i=u[t],c=i.start,o=i.size;d.push({index:t,start:c-f,size:o,width:q.current.width,isScrolling:n||void 0,isSticky:v.includes(t)||void 0,measureRef:function(i){i&&new ResizeObserver((function(i,a){var s,f,l,d=(i=i[0].target).getBoundingClientRect()[U];if(d){var v=null!=(s=null==(f=u[t-1])?void 0:f.end)?s:0;d===o&&c===v||(t<T.current&&c<r&&er(r+d-o,!1),j.current[t]=Z(t,d),k.current||cr(F.current,e,n),I.current=!0),T.current=t,null==(l=A.current.get(i))||l.disconnect(),A.current.set(i,a)}else a.disconnect(),A.current.delete(i)})).observe(i)}})};for(var h=c;h<=o;h+=1)i(h);v.length&&(c>(i=v[u(0,v.length-1,a,(function(r){return v[r]}))])&&(h=j.current[i].size,d.unshift({index:i,start:0,size:h,width:q.current.width,isScrolling:n||void 0,isSticky:!0,measureRef:function(){return null}}),f-=h,l+=h)),z((function(r){return function(r,e,n){if(r.length!==e.length)return!0;for(var t=function(t){if(Object.keys(r[t]).some((function(u){return!n[u]&&r[t][u]!==e[t][u]})))return{v:!0}},u=0;u<r.length;u+=1){var i=t(u);if("object"==typeof i)return i.v}return!1}(r.items,d,{measureRef:!0})?{items:d,innerMargin:f,innerSize:l}:r})),e&&(i=r>F.current,K.current&&K.current({overscanStartIndex:c,overscanStopIndex:o,visibleStartIndex:a,visibleStopIndex:s,scrollOffset:r,scrollForward:i,userScroll:N.current}),o=(c=Math.max(Math.floor((s+1)/S)-(i?0:1),0))*S,!G.current||s===O.current||B.current&&B.current(c)||G.current({startIndex:o,stopIndex:o+S-1,loadIndex:c,scrollOffset:r,userScroll:N.current}),n&&ur(),O.current=s)}else z({items:[]})}),[P,rr,Z,t,S,G,K,ur,er,U,B]);return function(r,e,n){var t=o(e);a((function(){if(null==r||!r.current)return function(){return null};var e=new ResizeObserver((function(r){r=r[0].contentRect,t.current({width:r.width,height:r.height})}));return e.observe(r.current),function(){return e.disconnect()}}),[t,r].concat(n))}(E,(function(r){var e,n=q.current,u=n.height;u=(n=n.width===r.width)&&u===r.height;var i=j.current.length,c=null==(e=j.current[i-1])?void 0:e.end;if(q.current=r,$(I.current),cr(F.current),d&&t!==i&&setTimeout((function(){return er(0,!1)})),C.current){var o;if(!I.current&&!n)e=null==(o=j.current[j.current.length-1])?void 0:o.end,er(F.current*(e/c||1),!1);!u&&Q.current&&Q.current(r)}else C.current=!0}),[t,d,cr,$,Q,er]),a((function(){L.current&&(i(w.innerMargin)&&(L.current.style[W]=w.innerMargin+"px"),i(w.innerSize)&&(L.current.style[U]=w.innerSize+"px"))}),[W,U,w.innerMargin,w.innerSize]),a((function(){var r=E.current;if(!r)return function(){return null};var e=function(r){if((r=r.target[X])!==F.current){var e=J.current;e="function"==typeof e?e(Math.abs(r-F.current)):e,cr(r,y.current,e),N.current=!0,y.current=!0,k.current=!1,F.current=r}};r.addEventListener("scroll",e,{passive:!0});var n=A.current;return function(){ir(),D.current&&(cancelAnimationFrame(D.current),D.current=void 0),r.removeEventListener("scroll",e),n.forEach((function(r){return r.disconnect()})),n.clear()}}),[ir,cr,X,J]),{outerRef:E,innerRef:L,items:w.items,scrollTo:nr,scrollToItem:f,startItem:r}},Object.defineProperty(r,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.umd.production.min.js.map

package.json

 {
   "name": "react-cool-virtual",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A tiny React hook for rendering large datasets like a breeze.",
@@ -94,5 +94,5 @@ "license": "MIT",
     "@ampproject/rollup-plugin-closure-compiler": "^0.27.0",
-    "@babel/core": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.16.8",
-    "@babel/preset-env": "^7.16.8",
+    "@babel/core": "^7.16.10",
+    "@babel/plugin-transform-runtime": "^7.16.10",
+    "@babel/preset-env": "^7.16.10",
     "@babel/preset-react": "^7.16.7",
@@ -118,3 +118,3 @@ "@babel/preset-typescript": "^7.16.7",
     "jest": "^27.4.7",
-    "lint-staged": "^12.1.7",
+    "lint-staged": "^12.2.1",
     "npm-run-all": "^4.1.5",
@@ -121,0 +121,0 @@ "prettier": "^2.5.1",

README.md

@@ -615,8 +615,8 @@ <p align="center">
   const [comments, setComments] = useState([]);
-  const { outerRef, innerRef, items, startItemIndex } = useVirtual({
+  const { outerRef, innerRef, items, startItem } = useVirtual({
     // Provide the number of comments
     itemCount: comments.length,
-    onScroll: ({ scrollOffset }) => {
+    onScroll: ({ scrollForward, scrollOffset }) => {
       // Tweak the threshold of data fetching that you want
-      if (scrollOffset < 50 && shouldFetchData) {
+      if (!scrollForward && scrollOffset < 50 && shouldFetchData) {
         fetchData(--postId, setComments);
@@ -630,11 +630,11 @@ shouldFetchData = false;
 
-  // Execute the `startItemIndex` through `useLayoutEffect` before the browser to paint
+  // Execute the `startItem` through `useLayoutEffect` before the browser to paint
   // See https://reactjs.org/docs/hooks-reference.html#uselayouteffect to learn more
   useLayoutEffect(() => {
     // After the list updated, maintain the previous scroll position for the user
-    startItemIndex(BATCH_COMMENTS + 1, () => {
+    startItem(BATCH_COMMENTS, () => {
       // After the scroll position updated, re-allow data fetching
       if (comments.length < TOTAL_COMMENTS) shouldFetchData = true;
     });
-  }, [comments.length, startItemIndex]);
+  }, [comments.length, startItem]);
 
@@ -1168,3 +1168,3 @@ return (
 
-#### startItemIndex
+#### startItem
 
@@ -1171,0 +1171,0 @@ `(index: number, callback?: () => void) => void`

No alert changes

Improved metrics

Total package byte prevSize

367722

increased by0.45%

Lines of code

1806

increased by1.18%

No dependency changes