From 6d084adf1a060bf10c560e556755d918193001b4 Mon Sep 17 00:00:00 2001
From: Rodrigo Pombo <pombopombopombo@gmail.com>
Date: Sun, 24 Feb 2019 20:51:45 -0300
Subject: [PATCH] Increase offset

---
 src/scroller.js             |  2 +-
 src/slide.js                | 20 ++++++++++----------
 src/todo.md                 |  2 ++
 src/use-virtual-children.js |  2 +-
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/scroller.js b/src/scroller.js
index fdd58ee..86cfb6c 100644
--- a/src/scroller.js
+++ b/src/scroller.js
@@ -29,7 +29,7 @@ export default function Scroller({
   return (
     <div
       style={{ height: "100%", overflowY: "auto" }}
-      class="scroller"
+      className="scroller"
       ref={ref}
       onScroll={e => setTop(e.target.scrollTop)}
       children={children}
diff --git a/src/slide.js b/src/slide.js
index 6a3c344..0c9f107 100644
--- a/src/slide.js
+++ b/src/slide.js
@@ -13,9 +13,17 @@ theme.styles.forEach(({ types, style }) => {
   });
 });
 
-function Line({ line, style }) {
+function getLineHeight(line, i, { styles }) {
+  return styles[i].height != null ? styles[i].height : 15;
+}
+
+function getLine(line, i, { styles }) {
+  const style = styles[i];
   return (
-    <div style={Object.assign({ overflow: "hidden", height: "15px" }, style)}>
+    <div
+      style={Object.assign({ overflow: "hidden", height: "15px" }, style)}
+      key={line.key}
+    >
       {line.tokens.map((token, i) => {
         const style = themeStylesByType[token.type] || {};
         return (
@@ -28,14 +36,6 @@ function Line({ line, style }) {
   );
 }
 
-function getLineHeight(line, i, { styles }) {
-  return styles[i].height != null ? styles[i].height : 15;
-}
-
-function getLine(line, i, { styles }) {
-  return <Line line={line} style={styles[i]} key={line.key} />;
-}
-
 function Slide({ lines, styles }) {
   const [top, setTop] = React.useState(0);
   return (
diff --git a/src/todo.md b/src/todo.md
index 8431d6a..f166701 100644
--- a/src/todo.md
+++ b/src/todo.md
@@ -1,2 +1,4 @@
 - move diffing to web worker
 - make diffing incremental
+- cache all the react elements from the lines + styles
+- only set scrollTop if `top` is different from the last value from the event (and clean the last value from the event after that)
diff --git a/src/use-virtual-children.js b/src/use-virtual-children.js
index 08c5ef5..5fc565c 100644
--- a/src/use-virtual-children.js
+++ b/src/use-virtual-children.js
@@ -10,7 +10,7 @@ export default function useChildren({
 }) {
   const children = [];
 
-  const extraRender = 500;
+  const extraRender = 1500;
 
   const topT = top - extraRender;
   const bottomT = top + height + extraRender;