Refactor scroller

src/scroller.js

@@ -0,0 +1,54 @@
+import React from "react";
+
+import useChildren from "./use-virtual-children";
+import { Scrollbars } from "react-custom-scrollbars";
+
+export default function Scroller({ items, getRow, getRowHeight, data }) {
+  const [top, setTop] = React.useState(0);
+
+  const ref = React.useRef(null);
+  const height = useHeight(ref);
+
+  const children = useChildren({
+    height,
+    top,
+    items,
+    getRow,
+    getRowHeight,
+    data
+  });
+
+  return (
+    <Scrollbars
+      autoHide
+      ref={ref}
+      // onScrollFrame={({ scrollTop }) => setTop(scrollTop)}
+      onScroll={e => setTop(e.target.scrollTop)}
+      renderThumbVertical={({ style, ...props }) => (
+        <div
+          style={{ ...style, backgroundColor: "rgb(173, 219, 103, 0.3)" }}
+          {...props}
+        />
+      )}
+      children={children}
+    />
+  );
+}
+
+function useHeight(ref) {
+  let [height, setHeight] = React.useState(null);
+
+  function handleResize() {
+    setHeight(ref.current.getClientHeight());
+  }
+
+  React.useEffect(() => {
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [ref.current]);
+
+  return height;
+}

src/slide.js

@@ -1,8 +1,7 @@
 import React from "react";
 import animation from "./animation";
 import theme from "./nightOwl";
-import useChildren from "./useVirtualChildren";
-import { Scrollbars } from "react-custom-scrollbars";
+import Scroller from "./scroller";
 
 const themeStylesByType = Object.create(null);
 theme.styles.forEach(({ types, style }) => {
@@ -37,42 +36,8 @@ function getLine(line, i, { styles }) {
   return <Line line={line} style={styles[i]} key={line.key} />;
 }
 
-function Lines({ height, top, lines, styles }) {
-  const children = useChildren({
-    height,
-    top,
-    items: lines,
-    getRow: getLine,
-    getRowHeight: getLineHeight,
-    data: { styles }
-  });
-  return children;
-}
-
-function useHeight(ref) {
-  let [height, setHeight] = React.useState(null);
-
-  function handleResize() {
-    setHeight(ref.current.getClientHeight());
-  }
-
-  React.useEffect(() => {
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [ref.current]);
-
-  return height;
-}
-
-function Slide({ lines, styles }) {
-  const [top, setTop] = React.useState(0);
-
-  let ref = React.useRef(null);
-  let height = useHeight(ref);
-
+export default function Slide({ time, lines }) {
+  const styles = animation((time + 1) / 2, lines);
   return (
     <pre
       style={{
@@ -85,36 +50,24 @@ function Slide({ lines, styles }) {
         boxSizing: "border-box"
       }}
     >
-      <Scrollbars
-        autoHide
-        ref={ref}
-        onScrollFrame={({ scrollTop }) => setTop(scrollTop)}
-        renderThumbVertical={({ style, ...props }) => (
-          <div
-            style={{ ...style, backgroundColor: "rgb(173, 219, 103, 0.3)" }}
-            {...props}
-          />
-        )}
+      <code
+        style={{
+          display: "block",
+          width: "calc(100% - 20px)",
+          maxWidth: "900px",
+          margin: "auto",
+          padding: "10px",
+          height: "100%",
+          boxSizing: "border-box"
+        }}
       >
-        <code
-          style={{
-            display: "block",
-            width: "calc(100% - 20px)",
-            maxWidth: "900px",
-            margin: "auto",
-            padding: "10px",
-            height: "100%",
-            boxSizing: "border-box"
-          }}
-        >
-          <Lines height={height} top={top} lines={lines} styles={styles} />
-        </code>
-      </Scrollbars>
+        <Scroller
+          items={lines}
+          getRow={getLine}
+          getRowHeight={getLineHeight}
+          data={{ styles }}
+        />
+      </code>
     </pre>
   );
 }
-
-export default function SlideWrapper({ time, lines }) {
-  const styles = animation((time + 1) / 2, lines);
-  return <Slide styles={styles} lines={lines} />;
-}

src/use-virtual-children.js

@@ -10,7 +10,7 @@ export default function useChildren({
 }) {
   const children = [];
 
-  const extraRender = 300;
+  const extraRender = 500;
 
   const topT = top - extraRender;
   const bottomT = top + height + extraRender;