react-cool-virtual - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

CHANGELOG.md

 # react-cool-virtual
 
+## 0.4.2
+
+### Patch Changes
+
+- [#173](https://github.com/wellyshen/react-cool-virtual/pull/173) [`70d04ac`](https://github.com/wellyshen/react-cool-virtual/commit/70d04ac5ebab7a686e58eca670679178b2e93a17) Thanks [@wellyshen](https://github.com/wellyshen)! - perf(useVirtual): mutate inner element styles only when items are updated
+
 ## 0.4.1
@@ -4,0 +10,0 @@

dist/index.cjs.development.js

@@ -137,3 +137,5 @@ 'use strict';
       size: isNumber(itemSize) ? itemSize : itemSize(i, 0),
-      measureRef: function measureRef() {
+      measureRef:
+      /* istanbul ignore next */
+      function measureRef() {
         return null;
@@ -186,3 +188,3 @@ }
   var prevItemIdxRef = react.useRef(-1);
-  var prevVStopRef = react.useRef();
+  var prevVStopRef = react.useRef(-1);
   var outerRef = react.useRef(null);
@@ -284,4 +286,2 @@ var innerRef = react.useRef(null);
   var scrollToOffset = react.useCallback(function (val, cb) {
-    var prevOffset = scrollOffsetRef.current;
-
     var _ref3 = isNumber(val) ? {
@@ -302,2 +302,3 @@ offset: val
 
+    var prevOffset = scrollOffsetRef.current;
     var start = now();
@@ -399,12 +400,9 @@
 
-    var _getCalcData = getCalcData(scrollOffset),
-        oStart = _getCalcData.oStart,
-        oStop = _getCalcData.oStop,
-        vStart = _getCalcData.vStart,
-        vStop = _getCalcData.vStop,
-        margin = _getCalcData.margin,
-        innerSize = _getCalcData.innerSize;
-
-    innerRef.current.style[marginKey] = margin + "px";
-    innerRef.current.style[sizeKey] = innerSize + "px";
+    var calcData = getCalcData(scrollOffset);
+    var oStart = calcData.oStart,
+        oStop = calcData.oStop,
+        vStart = calcData.vStart,
+        vStop = calcData.vStop;
+    var margin = calcData.margin,
+        innerSize = calcData.innerSize;
     var nextItems = [];
@@ -482,4 +480,4 @@ var stickies = Array.isArray(stickyIndicesRef.current) ? stickyIndicesRef.current : [];
         });
-        innerRef.current.style[marginKey] = margin - size + "px";
-        innerRef.current.style[sizeKey] = innerSize + size + "px";
+        margin -= size;
+        innerSize += size;
       }
@@ -489,5 +487,11 @@ }
     setItems(function (prevItems) {
-      return shouldUpdate(prevItems, nextItems, {
+      if (shouldUpdate(prevItems, nextItems, {
         measureRef: true
-      }) ? nextItems : prevItems;
+      })) {
+        innerRef.current.style[marginKey] = margin + "px";
+        innerRef.current.style[sizeKey] = innerSize + "px";
+        return nextItems;
+      }
+
+      return prevItems;
     });
@@ -494,0 +498,0 @@ if (!isScrolling) return;

dist/index.cjs.production.min.js

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

dist/index.esm.js

@@ -133,3 +133,5 @@ import { useRef, useCallback, useLayoutEffect, useEffect, useState } from 'react';
       size: isNumber(itemSize) ? itemSize : itemSize(i, 0),
-      measureRef: function measureRef() {
+      measureRef:
+      /* istanbul ignore next */
+      function measureRef() {
         return null;
@@ -182,3 +184,3 @@ }
   var prevItemIdxRef = useRef(-1);
-  var prevVStopRef = useRef();
+  var prevVStopRef = useRef(-1);
   var outerRef = useRef(null);
@@ -280,4 +282,2 @@ var innerRef = useRef(null);
   var scrollToOffset = useCallback(function (val, cb) {
-    var prevOffset = scrollOffsetRef.current;
-
     var _ref3 = isNumber(val) ? {
@@ -298,2 +298,3 @@ offset: val
 
+    var prevOffset = scrollOffsetRef.current;
     var start = now();
@@ -395,12 +396,9 @@
 
-    var _getCalcData = getCalcData(scrollOffset),
-        oStart = _getCalcData.oStart,
-        oStop = _getCalcData.oStop,
-        vStart = _getCalcData.vStart,
-        vStop = _getCalcData.vStop,
-        margin = _getCalcData.margin,
-        innerSize = _getCalcData.innerSize;
-
-    innerRef.current.style[marginKey] = margin + "px";
-    innerRef.current.style[sizeKey] = innerSize + "px";
+    var calcData = getCalcData(scrollOffset);
+    var oStart = calcData.oStart,
+        oStop = calcData.oStop,
+        vStart = calcData.vStart,
+        vStop = calcData.vStop;
+    var margin = calcData.margin,
+        innerSize = calcData.innerSize;
     var nextItems = [];
@@ -478,4 +476,4 @@ var stickies = Array.isArray(stickyIndicesRef.current) ? stickyIndicesRef.current : [];
         });
-        innerRef.current.style[marginKey] = margin - size + "px";
-        innerRef.current.style[sizeKey] = innerSize + size + "px";
+        margin -= size;
+        innerSize += size;
       }
@@ -485,5 +483,11 @@ }
     setItems(function (prevItems) {
-      return shouldUpdate(prevItems, nextItems, {
+      if (shouldUpdate(prevItems, nextItems, {
         measureRef: true
-      }) ? nextItems : prevItems;
+      })) {
+        innerRef.current.style[marginKey] = margin + "px";
+        innerRef.current.style[sizeKey] = innerSize + "px";
+        return nextItems;
+      }
+
+      return prevItems;
     });
@@ -490,0 +494,0 @@ if (!isScrolling) return;

dist/index.umd.development.js

@@ -137,3 +137,5 @@ (function (global, factory) {
         size: isNumber(itemSize) ? itemSize : itemSize(i, 0),
-        measureRef: function measureRef() {
+        measureRef:
+        /* istanbul ignore next */
+        function measureRef() {
           return null;
@@ -186,3 +188,3 @@ }
     var prevItemIdxRef = react.useRef(-1);
-    var prevVStopRef = react.useRef();
+    var prevVStopRef = react.useRef(-1);
     var outerRef = react.useRef(null);
@@ -284,4 +286,2 @@ var innerRef = react.useRef(null);
     var scrollToOffset = react.useCallback(function (val, cb) {
-      var prevOffset = scrollOffsetRef.current;
-
       var _ref3 = isNumber(val) ? {
@@ -302,2 +302,3 @@ offset: val
 
+      var prevOffset = scrollOffsetRef.current;
       var start = now();
@@ -399,12 +400,9 @@
 
-      var _getCalcData = getCalcData(scrollOffset),
-          oStart = _getCalcData.oStart,
-          oStop = _getCalcData.oStop,
-          vStart = _getCalcData.vStart,
-          vStop = _getCalcData.vStop,
-          margin = _getCalcData.margin,
-          innerSize = _getCalcData.innerSize;
-
-      innerRef.current.style[marginKey] = margin + "px";
-      innerRef.current.style[sizeKey] = innerSize + "px";
+      var calcData = getCalcData(scrollOffset);
+      var oStart = calcData.oStart,
+          oStop = calcData.oStop,
+          vStart = calcData.vStart,
+          vStop = calcData.vStop;
+      var margin = calcData.margin,
+          innerSize = calcData.innerSize;
       var nextItems = [];
@@ -482,4 +480,4 @@ var stickies = Array.isArray(stickyIndicesRef.current) ? stickyIndicesRef.current : [];
           });
-          innerRef.current.style[marginKey] = margin - size + "px";
-          innerRef.current.style[sizeKey] = innerSize + size + "px";
+          margin -= size;
+          innerSize += size;
         }
@@ -489,5 +487,11 @@ }
       setItems(function (prevItems) {
-        return shouldUpdate(prevItems, nextItems, {
+        if (shouldUpdate(prevItems, nextItems, {
           measureRef: true
-        }) ? nextItems : prevItems;
+        })) {
+          innerRef.current.style[marginKey] = margin + "px";
+          innerRef.current.style[sizeKey] = innerSize + "px";
+          return nextItems;
+        }
+
+        return prevItems;
       });
@@ -494,0 +498,0 @@ if (!isScrolling) return;

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

package.json

 {
   "name": "react-cool-virtual",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "A tiny React hook for rendering large datasets like a breeze.",
@@ -96,3 +96,3 @@ "license": "MIT",
     "@babel/plugin-transform-runtime": "^7.14.5",
-    "@babel/preset-env": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
@@ -107,15 +107,16 @@ "@babel/preset-typescript": "^7.14.5",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/react-hooks": "^7.0.0",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^7.0.1",
+    "@testing-library/user-event": "^13.1.9",
     "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.11",
+    "@types/react": "^17.0.13",
     "bundlesize2": "^0.0.27",
     "cpy-cli": "^3.1.1",
     "eslint": "^7.2.0",
-    "eslint-config-welly": "^1.11.1",
-    "husky": "^6.0.0",
-    "jest": "^27.0.4",
+    "eslint-config-welly": "^1.11.3",
+    "husky": "^7.0.0",
+    "jest": "^27.0.6",
     "lint-staged": "^11.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.1",
+    "prettier": "^2.3.2",
     "react": "^17.0.2",
@@ -125,7 +126,7 @@ "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.52.1",
+    "rollup": "^2.52.7",
     "rollup-plugin-size-snapshot": "^0.12.0",
     "rollup-plugin-terser": "^7.0.2",
     "ts-jest": "^27.0.3",
-    "typescript": "^4.3.4"
+    "typescript": "^4.3.5"
   },
@@ -132,0 +133,0 @@ "peerDependencies": {

README.md

@@ -11,3 +11,5 @@ <p align="center">
 [![npm downloads](https://img.shields.io/npm/dt/react-cool-virtual?style=flat-square)](https://www.npmtrends.com/react-cool-virtual)
+[![coverage status](https://img.shields.io/coveralls/github/wellyshen/react-cool-virtual?style=flat-square)](https://coveralls.io/github/wellyshen/react-cool-virtual?branch=master)
 [![gzip size](https://badgen.net/bundlephobia/minzip/react-cool-virtual?label=gzip%20size&style=flat-square)](https://bundlephobia.com/result?p=react-cool-virtual)
+[![best of js](https://img.shields.io/endpoint?style=flat-square&url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=wellyshen%2Freact-cool-virtual)](https://bestofjs.org/projects/react-cool-virtual)
 [![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
@@ -37,3 +39,3 @@
 
-When rendering a large set of data (e.g. list, table, etc.) in React, we all face performance/memory troubles. There're [some great libraries](https://www.npmjs.com/search?q=react%20virtualized) already available but most of them are component-based solutions that provide well-defineded way of using but increase a lot of bundle size. However [a library](https://github.com/tannerlinsley/react-virtual) comes out as a hook-based solution that is flexible and `headless` but applying styles for using it can be verbose. Furthermore, it lacks many of the [useful features](#features).
+When rendering a large set of data (e.g. list, table, etc.) in React, we all face performance/memory troubles. There're [some great libraries](https://www.npmjs.com/search?q=react%20virtualized) already available but most of them are component-based solutions that provide well-defineded way of using but increase a lot of bundle size. However, [a library](https://github.com/tannerlinsley/react-virtual) comes out as a hook-based solution that is flexible and `headless` but applying styles for using it can be verbose. Furthermore, it lacks many of the [useful features](#features).
 
@@ -240,3 +242,3 @@ React Cool Virtual is a [tiny](https://bundlephobia.com/result?p=react-cool-virtual) React hook that gives you a **better DX** and **modern way** for virtualizing a large amount of data without struggle 🤯.
 
-> 💡 The scrollbar is jumping? It's because the total size of the items is gradually corrected along with an item has been measured. You can tweak the `itemSize` to reduce the phenomenon.
+> 💡 The scrollbar is jumping? It's because the total size of the items is gradually corrected along with an item that has been measured. You can tweak the `itemSize` to reduce the phenomenon.
 
@@ -1387,4 +1389,4 @@ ### Real-time Resize
 
-- [ ] Unit testing (WIP)
 - [ ] Support window scrolling
+- [ ] Leverage the power of [Offscreen API](https://github.com/reactwg/react-18/discussions/19) (maybe...)
 
@@ -1391,0 +1393,0 @@ ## Articles / Blog Posts <!-- omit in toc -->

No alert changes

Improved metrics

Total package byte prevSize

345000

increased by0.38%

Lines of code

1725

increased by0.88%

Number of lines in readme file

1414

increased by0.14%

Worsened metrics

Dev dependency count

36

increased by2.86%

No dependency changes