update libs, code cleanup, use npm

Author: stevensacks

.prettierrc

@@ -2,5 +2,5 @@
     "bracketSpacing": false,
     "singleQuote": true,
     "tabWidth": 4,
-    "trailingComma": "es5"
+    "arrowParens": "avoid"
 }

demo/src/TestRow/index.js

@@ -2,7 +2,9 @@ import React from 'react';
 
 const TestRow = ({data, height, onClick, rowIndex, rowRef}) => (
     <div ref={rowRef} className="test-row" onClick={() => onClick(rowIndex)}>
-        <strong>[{data.id}]</strong>: {height}px<br/>{data.content}
+        <strong>[{data.id}]</strong>: {height}px
+        <br />
+        {data.content}
     </div>
 );
 

demo/src/index.js

@@ -1,5 +1,5 @@
-import data from './data';
 import React, {useState} from 'react';
+import data from './data';
 import ReactSmartScroll from '../../src';
 import {render} from 'react-dom';
 import TestRow from './TestRow';

package-lock.json

@@ -44,25 +44,25 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "react": "^16.12.0"
+    "react": "^16.13.1"
   },
   "devDependencies": {
-    "babel-eslint": "^10.0.3",
+    "babel-eslint": "^10.1.0",
     "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.9.0",
-    "eslint-config-react-app": "^5.1.0",
-    "eslint-plugin-flowtype": "^4.5.3",
-    "eslint-plugin-import": "^2.19.1",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-plugin-flowtype": "^4.7.0",
+    "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
-    "husky": "^4.0.3",
-    "lint-staged": "^9.5.0",
-    "nwb": "0.23.x",
-    "prettier": "^1.19.1",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
+    "husky": "^4.2.3",
+    "lint-staged": "^10.1.2",
+    "nwb": "0.24.x",
+    "prettier": "^2.0.4",
     "prop-types": "^15.7.2",
     "react": "^16.10.2",
-    "react-dom": "^16.12.0"
+    "react-dom": "^16.13.1"
   }
 }

package.json

@@ -26,12 +26,7 @@ const ReactSmartScroll = props => {
     } = props;
 
     const [start, setStart] = useState(0);
-
-    const [refs, setRefs] = useState(
-        Array(data.length)
-            .fill(undefined)
-            .map(() => createRef())
-    );
+    const [refs, setRefs] = useState([]);
 
     const [actualHeights, setActualHeights] = useReducer((state, action) => {
         if (!action.reset) {
@@ -113,17 +108,7 @@ const ReactSmartScroll = props => {
                 }, 0);
             }
         }
-    }, [
-        actualHeights,
-        data,
-        refs,
-        scroll.top,
-        setMeasurements,
-        setStart,
-        start,
-        startAt,
-        visible.height,
-    ]);
+    }, [actualHeights, data, refs, scroll.top, start, startAt, visible.height]);
 
     const {endIndex, paddingBottom, paddingTop, startIndex} = measurements;
 

src/ReactSmartScroll/index.js

@@ -1,3 +1,5 @@
+// these utils are imperative because they are called in useLayoutEffect
+// and performance is the priority
 export const calcStartIndex = (actualHeights, top = 0) => {
     const len = actualHeights.length;
     if (top === 0 || len < 2) return 0;

src/ReactSmartScroll/utils.js

@@ -10,9 +10,7 @@ export default ref => {
                 left: current.scrollLeft,
             });
         };
-        if (current) {
-            current.addEventListener('scroll', onScroll);
-        }
+        if (current) current.addEventListener('scroll', onScroll);
         return () => current && current.removeEventListener('scroll', onScroll);
     }, [ref]);
     return scroll;