react-cool-virtual - npm Package Compare versions

Comparing version 0.5.2 to 0.5.3

CHANGELOG.md

 # react-cool-virtual
 
+## 0.5.3
+
+### Patch Changes
+
+- [#254](https://github.com/wellyshen/react-cool-virtual/pull/254) [`c453cad`](https://github.com/wellyshen/react-cool-virtual/commit/c453cad0c82e7e40baf741dd8f0676360e378041) Thanks [@wellyshen](https://github.com/wellyshen)! - fix: app crash when dynamic change data (from short to long)
+
 ## 0.5.2
@@ -4,0 +10,0 @@

dist/index.cjs.development.js

@@ -229,3 +229,3 @@ 'use strict';
 
-    msDataRef.current.length = itemCount;
+    msDataRef.current = msDataRef.current.slice(0, itemCount);
 
@@ -238,10 +238,11 @@ for (var i = 0; i < itemCount; i += 1) {
     var msData = msDataRef.current;
+    var lastIdx = msData.length - 1;
     var vStart = 0;
 
     if (hasDynamicSizeRef.current) {
-      while (vStart < msData.length - 1 && msData[vStart].start + msData[vStart].size < scrollOffset) {
+      while (vStart < lastIdx && msData[vStart].start + msData[vStart].size < scrollOffset) {
         vStart += 1;
       }
     } else {
-      vStart = findNearestBinarySearch(0, msData.length - 1, scrollOffset, function (idx) {
+      vStart = findNearestBinarySearch(0, lastIdx, scrollOffset, function (idx) {
         return msData[idx].start;
@@ -254,3 +255,3 @@ });
 
-    while (vStop < msData.length && currStart < scrollOffset + outerRectRef.current[sizeKey]) {
+    while (vStop < lastIdx && currStart < scrollOffset + outerRectRef.current[sizeKey]) {
       currStart += msData[vStop].size;
@@ -260,6 +261,7 @@ vStop += 1;
 
+    vStop = vStop === lastIdx ? vStop : vStop - 1;
     var oStart = Math.max(vStart - overscanCount, 0);
-    var oStop = Math.min(vStop + overscanCount, msData.length) - 1;
+    var oStop = Math.min(vStop + overscanCount, lastIdx);
     var innerMargin = msData[oStart].start;
-    var totalSize = Math[oStop < msData.length - 1 ? "max" : "min"](msData[oStop].end + msData[oStop].size, msData[msData.length - 1].end);
+    var totalSize = Math[oStop < lastIdx ? "max" : "min"](msData[oStop].end + msData[oStop].size, msData[lastIdx].end);
     return {
@@ -269,3 +271,3 @@ oStart: oStart,
       vStart: vStart,
-      vStop: vStop - 1,
+      vStop: vStop,
       innerMargin: innerMargin,
@@ -529,5 +531,9 @@ innerSize: totalSize - innerMargin
     measureItems(hasDynamicSizeRef.current);
-    if (!resetScroll || !msDataLen) handleScroll(scrollOffsetRef.current);
-    if (resetScroll && itemCount !== msDataLen) scrollTo(0, false);
 
+    if (resetScroll && msDataLen && msDataLen !== itemCount) {
+      scrollTo(0, false);
+    } else {
+      handleScroll(scrollOffsetRef.current);
+    }
+
     if (!isMountedRef.current) {
@@ -534,0 +540,0 @@ isMountedRef.current = true;

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 R=e.scrollEasingFunction;R=void 0===R?function(r){return-(Math.cos(Math.PI*r)-1)/2}:R;var S=e.loadMoreCount,b=void 0===S?15:S;S=e.isItemLoaded;var p=e.loadMore,x=e.onScroll,w=e.onResize,M=n.useState((function(){return function(r,e){if(!e)return[];var n=u(e)?[0,e-1]:e;e=n[1];var t=[];for(n=n[0];n<=e;n+=1)t[n]={index:n,start:0,width:0,size:u(r)?r:r(n,0),measureRef:function(){return null}};return t}(f,s)}));e=M[0];var 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(R),G=n.useRef(S),H=i(p),J=i(f),K=i(v),Q=i(x),U=i(w),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=0;if(y.current)for(;n<e.length-1&&e[n].start+e[n].size<r;)n+=1;else n=t(0,e.length-1,r,(function(r){return e[r].start}));for(var u=n,c=e[u].start;u<e.length&&c<r+q.current[V];)c+=e[u].size,u+=1;r=Math.max(n-h,0),c=Math.min(u+h,e.length)-1;var i=e[r].start;return{oStart:r,oStop:c,vStart:n,vStop:u-1,innerMargin:i,innerSize:Math[c<e.length-1?"max":"min"](e[c].end+e[c].size,e[e.length-1].end)-i}}),[h,V]),er=n.useCallback((function(r,e){void 0===e&&(e=!0),L.current&&(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(N.current=!1,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){var t=u(e)?{index:e}:e,c=t.index,i=t.align;if(i=void 0===i?r.auto:i,t=t.smooth,u(c)){k.current=!0,y.current&&$();var o=j.current,a=o[Math.max(0,Math.min(c,o.length-1))];if(a){c=a.start;var s=a.end;a=a.size,o=o[o.length-1].end;var l=q.current[V],f=F.current;o<=l?n&&n():(i===r.start||i===r.auto&&f+l>s&&f>c?f=o-c<=l?o-l:c:i===r.end||i===r.auto&&f+l<s&&f<c?f=c+a<=l?0:c-l+a:i===r.center&&c+a/2>l/2&&(f=o-(i=c-l/2+a/2)<=l?o-l:i),y.current&&1>=Math.abs(f-F.current)?n&&n():nr({offset:f,smooth:t},(function(){y.current?setTimeout((function(){return tr(e,n)})):n&&n()})))}}}),[$,nr,V]),ur=(l=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))[0],cr=l[1],ir=n.useCallback((function(r,e,n){if(T.current)if(!H.current||C.current||G.current&&G.current(0)||H.current({startIndex:0,stopIndex:b-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,d,{measureRef:!0})?(T.current.style[W]=l+"px",T.current.style[V]=f+"px",d):r})),e&&(Q.current&&Q.current({overscanStartIndex:c,overscanStopIndex:i,visibleStartIndex:o,visibleStopIndex:s,scrollOffset:r,scrollForward:r>F.current,userScroll:N.current}),i=(c=Math.floor((s+1)/b))*b,!H.current||s===E.current||G.current&&G.current(c)||H.current({startIndex:i,stopIndex:i+b-1,loadIndex:c,scrollOffset:r,userScroll:N.current}),n&&ur(),E.current=s)}else z([])}),[P,rr,Z,a,b,H,W,Q,ur,er,V]);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),d&&u||ir(F.current),d&&a!==u&&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(){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:e,scrollTo:nr,scrollToItem:tr}};
+"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,f=e.itemSize,l=void 0===f?50:f;f=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 R=e.scrollEasingFunction;R=void 0===R?function(r){return-(Math.cos(Math.PI*r)-1)/2}:R;var S=e.loadMoreCount,b=void 0===S?15:S;S=e.isItemLoaded;var p=e.loadMore,x=e.onScroll,w=e.onResize,M=n.useState((function(){return function(r,e){if(!e)return[];var n=u(e)?[0,e-1]:e;e=n[1];var t=[];for(n=n[0];n<=e;n+=1)t[n]={index:n,start:0,width:0,size:u(r)?r:r(n,0),measureRef:function(){return null}};return t}(l,s)}));e=M[0];var 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(R),G=n.useRef(S),H=i(p),J=i(l),K=i(v),Q=i(x),U=i(w),V=f?"width":"height",W=f?"marginLeft":"marginTop",X=f?"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=j.current.slice(0,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&&(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(N.current=!1,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){var t=u(e)?{index:e}:e,c=t.index,i=t.align;if(i=void 0===i?r.auto:i,t=t.smooth,u(c)){k.current=!0,y.current&&$();var o=j.current,a=o[Math.max(0,Math.min(c,o.length-1))];if(a){c=a.start;var s=a.end;a=a.size,o=o[o.length-1].end;var f=q.current[V],l=F.current;o<=f?n&&n():(i===r.start||i===r.auto&&l+f>s&&l>c?l=o-c<=f?o-f:c:i===r.end||i===r.auto&&l+f<s&&l<c?l=c+a<=f?0:c-f+a:i===r.center&&c+a/2>f/2&&(l=o-(i=c-f/2+a/2)<=f?o-f:i),y.current&&1>=Math.abs(l-F.current)?n&&n():nr({offset:l,smooth:t},(function(){y.current?setTimeout((function(){return tr(e,n)})):n&&n()})))}}}),[$,nr,V]),ur=(f=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))[0],cr=f[1],ir=n.useCallback((function(r,e,n){if(T.current)if(!H.current||C.current||G.current&&G.current(0)||H.current({startIndex:0,stopIndex:b-1,loadIndex:0,scrollOffset:r,userScroll:!1}),a){var u=rr(r),c=u.oStart,i=u.oStop,o=u.vStart,s=u.vStop,f=u.innerMargin,l=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-f,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,f,l,d=(c=c[0].target).getBoundingClientRect()[V];if(d){var v=null!=(s=null==(f=u[t-1])?void 0:f.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==(l=A.current.get(c))||l.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}}),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,d,{measureRef:!0})?(T.current.style[W]=f+"px",T.current.style[V]=l+"px",d):r})),e&&(Q.current&&Q.current({overscanStartIndex:c,overscanStopIndex:i,visibleStartIndex:o,visibleStopIndex:s,scrollOffset:r,scrollForward:r>F.current,userScroll:N.current}),i=(c=Math.floor((s+1)/b))*b,!H.current||s===E.current||G.current&&G.current(c)||H.current({startIndex:i,stopIndex:i+b-1,loadIndex:c,scrollOffset:r,userScroll:N.current}),n&&ur(),E.current=s)}else z([])}),[P,rr,Z,a,b,H,W,Q,ur,er,V]);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),d&&u&&u!==a?er(0,!1):ir(F.current),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(){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:e,scrollTo:nr,scrollToItem:tr}};
 //# sourceMappingURL=index.cjs.production.min.js.map

dist/index.esm.js

@@ -225,3 +225,3 @@ import { useRef, useCallback, useLayoutEffect, useEffect, useState } from 'react';
 
-    msDataRef.current.length = itemCount;
+    msDataRef.current = msDataRef.current.slice(0, itemCount);
 
@@ -234,10 +234,11 @@ for (var i = 0; i < itemCount; i += 1) {
     var msData = msDataRef.current;
+    var lastIdx = msData.length - 1;
     var vStart = 0;
 
     if (hasDynamicSizeRef.current) {
-      while (vStart < msData.length - 1 && msData[vStart].start + msData[vStart].size < scrollOffset) {
+      while (vStart < lastIdx && msData[vStart].start + msData[vStart].size < scrollOffset) {
         vStart += 1;
       }
     } else {
-      vStart = findNearestBinarySearch(0, msData.length - 1, scrollOffset, function (idx) {
+      vStart = findNearestBinarySearch(0, lastIdx, scrollOffset, function (idx) {
         return msData[idx].start;
@@ -250,3 +251,3 @@ });
 
-    while (vStop < msData.length && currStart < scrollOffset + outerRectRef.current[sizeKey]) {
+    while (vStop < lastIdx && currStart < scrollOffset + outerRectRef.current[sizeKey]) {
       currStart += msData[vStop].size;
@@ -256,6 +257,7 @@ vStop += 1;
 
+    vStop = vStop === lastIdx ? vStop : vStop - 1;
     var oStart = Math.max(vStart - overscanCount, 0);
-    var oStop = Math.min(vStop + overscanCount, msData.length) - 1;
+    var oStop = Math.min(vStop + overscanCount, lastIdx);
     var innerMargin = msData[oStart].start;
-    var totalSize = Math[oStop < msData.length - 1 ? "max" : "min"](msData[oStop].end + msData[oStop].size, msData[msData.length - 1].end);
+    var totalSize = Math[oStop < lastIdx ? "max" : "min"](msData[oStop].end + msData[oStop].size, msData[lastIdx].end);
     return {
@@ -265,3 +267,3 @@ oStart: oStart,
       vStart: vStart,
-      vStop: vStop - 1,
+      vStop: vStop,
       innerMargin: innerMargin,
@@ -525,5 +527,9 @@ innerSize: totalSize - innerMargin
     measureItems(hasDynamicSizeRef.current);
-    if (!resetScroll || !msDataLen) handleScroll(scrollOffsetRef.current);
-    if (resetScroll && itemCount !== msDataLen) scrollTo(0, false);
 
+    if (resetScroll && msDataLen && msDataLen !== itemCount) {
+      scrollTo(0, false);
+    } else {
+      handleScroll(scrollOffsetRef.current);
+    }
+
     if (!isMountedRef.current) {
@@ -530,0 +536,0 @@ isMountedRef.current = true;

dist/index.umd.development.js

@@ -229,3 +229,3 @@ (function (global, factory) {
 
-      msDataRef.current.length = itemCount;
+      msDataRef.current = msDataRef.current.slice(0, itemCount);
 
@@ -238,10 +238,11 @@ for (var i = 0; i < itemCount; i += 1) {
       var msData = msDataRef.current;
+      var lastIdx = msData.length - 1;
       var vStart = 0;
 
       if (hasDynamicSizeRef.current) {
-        while (vStart < msData.length - 1 && msData[vStart].start + msData[vStart].size < scrollOffset) {
+        while (vStart < lastIdx && msData[vStart].start + msData[vStart].size < scrollOffset) {
           vStart += 1;
         }
       } else {
-        vStart = findNearestBinarySearch(0, msData.length - 1, scrollOffset, function (idx) {
+        vStart = findNearestBinarySearch(0, lastIdx, scrollOffset, function (idx) {
           return msData[idx].start;
@@ -254,3 +255,3 @@ });
 
-      while (vStop < msData.length && currStart < scrollOffset + outerRectRef.current[sizeKey]) {
+      while (vStop < lastIdx && currStart < scrollOffset + outerRectRef.current[sizeKey]) {
         currStart += msData[vStop].size;
@@ -260,6 +261,7 @@ vStop += 1;
 
+      vStop = vStop === lastIdx ? vStop : vStop - 1;
       var oStart = Math.max(vStart - overscanCount, 0);
-      var oStop = Math.min(vStop + overscanCount, msData.length) - 1;
+      var oStop = Math.min(vStop + overscanCount, lastIdx);
       var innerMargin = msData[oStart].start;
-      var totalSize = Math[oStop < msData.length - 1 ? "max" : "min"](msData[oStop].end + msData[oStop].size, msData[msData.length - 1].end);
+      var totalSize = Math[oStop < lastIdx ? "max" : "min"](msData[oStop].end + msData[oStop].size, msData[lastIdx].end);
       return {
@@ -269,3 +271,3 @@ oStart: oStart,
         vStart: vStart,
-        vStop: vStop - 1,
+        vStop: vStop,
         innerMargin: innerMargin,
@@ -529,5 +531,9 @@ innerSize: totalSize - innerMargin
       measureItems(hasDynamicSizeRef.current);
-      if (!resetScroll || !msDataLen) handleScroll(scrollOffsetRef.current);
-      if (resetScroll && itemCount !== msDataLen) scrollTo(0, false);
 
+      if (resetScroll && msDataLen && msDataLen !== itemCount) {
+        scrollTo(0, false);
+      } else {
+        handleScroll(scrollOffsetRef.current);
+      }
+
       if (!isMountedRef.current) {
@@ -534,0 +540,0 @@ isMountedRef.current = true;

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 R=r.scrollEasingFunction;R=void 0===R?function(r){return-(Math.cos(Math.PI*r)-1)/2}:R;var p=r.loadMoreCount,b=void 0===p?15:p;p=r.isItemLoaded;var S=r.loadMore,x=r.onScroll,w=r.onResize,M=e.useState((function(){return function(r,e){if(!e)return[];var n=c(e)?[0,e-1]:e;e=n[1];var t=[];for(n=n[0];n<=e;n+=1)t[n]={index:n,start:0,width:0,size:c(r)?r:r(n,0),measureRef:function(){return null}};return t}(l,s)}));r=M[0];var y=M[1],z=e.useRef(!1),C=e.useRef(!0),I=e.useRef(!1),k=e.useRef(!1),A=e.useRef(new Map),F=e.useRef(0),O=e.useRef(-1),T=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(R),B=e.useRef(p),G=o(S),H=o(l),J=o(v),K=o(x),Q=o(w),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){void 0===r&&(r=!0),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=0;if(k.current)for(;n<e.length-1&&e[n].start+e[n].size<r;)n+=1;else n=u(0,e.length-1,r,(function(r){return e[r].start}));for(var t=n,c=e[t].start;t<e.length&&c<r+j.current[U];)c+=e[t].size,t+=1;r=Math.max(n-h,0),c=Math.min(t+h,e.length)-1;var i=e[r].start;return{oStart:r,oStop:c,vStart:n,vStop:t-1,innerMargin:i,innerSize:Math[c<e.length-1?"max":"min"](e[c].end+e[c].size,e[e.length-1].end)-i}}),[h,U]),er=e.useCallback((function(r,e){void 0===e&&(e=!0),E.current&&(C.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(N.current=!1,r){var t=F.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){var t=c(r)?{index:r}:r,u=t.index,i=t.align;if(i=void 0===i?n.auto:i,t=t.smooth,c(u)){I.current=!0,k.current&&$();var o=q.current,a=o[Math.max(0,Math.min(u,o.length-1))];if(a){u=a.start;var s=a.end;a=a.size,o=o[o.length-1].end;var f=j.current[U],l=F.current;o<=f?e&&e():(i===n.start||i===n.auto&&l+f>s&&l>u?l=o-u<=f?o-f:u:i===n.end||i===n.auto&&l+f<s&&l<u?l=u+a<=f?0:u-f+a:i===n.center&&u+a/2>f/2&&(l=o-(i=u-f/2+a/2)<=f?o-f:i),k.current&&1>=Math.abs(l-F.current)?e&&e():nr({offset:l,smooth:t},(function(){k.current?setTimeout((function(){return tr(r,e)})):e&&e()})))}}}),[$,nr,U]),ur=(f=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(F.current)}),150))[0],cr=f[1],ir=e.useCallback((function(r,e,n){if(L.current)if(!G.current||z.current||B.current&&B.current(0)||G.current({startIndex:0,stopIndex:b-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<O.current&&i<r&&er(r+d-o,!1),q.current[t]=Z(t,d),I.current||ir(F.current,e,n),k.current=!0),O.current=t,null==(l=A.current.get(c))||l.disconnect(),A.current.set(c,a)}else a.disconnect(),A.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)),y((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,d,{measureRef:!0})?(L.current.style[W]=f+"px",L.current.style[U]=l+"px",d):r})),e&&(K.current&&K.current({overscanStartIndex:i,overscanStopIndex:o,visibleStartIndex:a,visibleStopIndex:s,scrollOffset:r,scrollForward:r>F.current,userScroll:N.current}),o=(i=Math.floor((s+1)/b))*b,!G.current||s===T.current||B.current&&B.current(i)||G.current({startIndex:o,stopIndex:o+b-1,loadIndex:i,scrollOffset:r,userScroll:N.current}),n&&ur(),T.current=s)}else y([])}),[P,rr,Z,t,b,G,W,K,ur,er,U]);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),d&&c||ir(F.current),d&&t!==c&&er(0,!1),z.current){var o;if(!k.current&&!n)e=null==(o=q.current[q.current.length-1])?void 0:o.end,er(F.current*(e/i||1),!1);!u&&Q.current&&Q.current(r)}else z.current=!0}),[t,d,ir,$,Q,er]),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,ir(r,C.current,e),N.current=!0,C.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,J]),{outerRef:E,innerRef:L,items:r,scrollTo:nr,scrollToItem:tr}},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,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 R=r.scrollEasingFunction;R=void 0===R?function(r){return-(Math.cos(Math.PI*r)-1)/2}:R;var p=r.loadMoreCount,b=void 0===p?15:p;p=r.isItemLoaded;var S=r.loadMore,x=r.onScroll,w=r.onResize,M=e.useState((function(){return function(r,e){if(!e)return[];var n=c(e)?[0,e-1]:e;e=n[1];var t=[];for(n=n[0];n<=e;n+=1)t[n]={index:n,start:0,width:0,size:c(r)?r:r(n,0),measureRef:function(){return null}};return t}(l,s)}));r=M[0];var y=M[1],z=e.useRef(!1),C=e.useRef(!0),I=e.useRef(!1),k=e.useRef(!1),A=e.useRef(new Map),F=e.useRef(0),O=e.useRef(-1),T=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(R),B=e.useRef(p),G=o(S),H=o(l),J=o(v),K=o(x),Q=o(w),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){void 0===r&&(r=!0),q.current=q.current.slice(0,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&&(C.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(N.current=!1,r){var t=F.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){var t=c(r)?{index:r}:r,u=t.index,i=t.align;if(i=void 0===i?n.auto:i,t=t.smooth,c(u)){I.current=!0,k.current&&$();var o=q.current,a=o[Math.max(0,Math.min(u,o.length-1))];if(a){u=a.start;var s=a.end;a=a.size,o=o[o.length-1].end;var f=j.current[U],l=F.current;o<=f?e&&e():(i===n.start||i===n.auto&&l+f>s&&l>u?l=o-u<=f?o-f:u:i===n.end||i===n.auto&&l+f<s&&l<u?l=u+a<=f?0:u-f+a:i===n.center&&u+a/2>f/2&&(l=o-(i=u-f/2+a/2)<=f?o-f:i),k.current&&1>=Math.abs(l-F.current)?e&&e():nr({offset:l,smooth:t},(function(){k.current?setTimeout((function(){return tr(r,e)})):e&&e()})))}}}),[$,nr,U]),ur=(f=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(F.current)}),150))[0],cr=f[1],ir=e.useCallback((function(r,e,n){if(L.current)if(!G.current||z.current||B.current&&B.current(0)||G.current({startIndex:0,stopIndex:b-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<O.current&&i<r&&er(r+d-o,!1),q.current[t]=Z(t,d),I.current||ir(F.current,e,n),k.current=!0),O.current=t,null==(l=A.current.get(c))||l.disconnect(),A.current.set(c,a)}else a.disconnect(),A.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)),y((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,d,{measureRef:!0})?(L.current.style[W]=f+"px",L.current.style[U]=l+"px",d):r})),e&&(K.current&&K.current({overscanStartIndex:i,overscanStopIndex:o,visibleStartIndex:a,visibleStopIndex:s,scrollOffset:r,scrollForward:r>F.current,userScroll:N.current}),o=(i=Math.floor((s+1)/b))*b,!G.current||s===T.current||B.current&&B.current(i)||G.current({startIndex:o,stopIndex:o+b-1,loadIndex:i,scrollOffset:r,userScroll:N.current}),n&&ur(),T.current=s)}else y([])}),[P,rr,Z,t,b,G,W,K,ur,er,U]);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),d&&c&&c!==t?er(0,!1):ir(F.current),z.current){var o;if(!k.current&&!n)e=null==(o=q.current[q.current.length-1])?void 0:o.end,er(F.current*(e/i||1),!1);!u&&Q.current&&Q.current(r)}else z.current=!0}),[t,d,ir,$,Q,er]),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,ir(r,C.current,e),N.current=!0,C.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,J]),{outerRef:E,innerRef:L,items:r,scrollTo:nr,scrollToItem:tr}},Object.defineProperty(r,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.umd.production.min.js.map

package.json

 {
   "name": "react-cool-virtual",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "A tiny React hook for rendering large datasets like a breeze.",
@@ -5,0 +5,0 @@ "license": "MIT",

No alert changes

Improved metrics

Total package byte prevSize

352995

increased by0.3%

Lines of code

1738

increased by0.81%

No dependency changes