diff --git a/src/app.js b/src/app.js
index 37a3c65..a2181e5 100644
--- a/src/app.js
+++ b/src/app.js
@@ -37,12 +37,7 @@ function InnerApp({ gitProvider }) {
     return <Error error={{ status: 404 }} gitProvider={gitProvider} />;
   }
 
-  const commits = versions.map(v => v.commit);
-  const slideLines = versions.map(v => v.lines);
-
-  return (
-    <History commits={commits} slideLines={slideLines} loadMore={loadMore} />
-  );
+  return <History versions={versions} loadMore={loadMore} />;
 }
 
 function useVersionsLoader(gitProvider) {
diff --git a/src/git-providers/differ.js b/src/git-providers/differ.js
index 0306d27..c46765d 100644
--- a/src/git-providers/differ.js
+++ b/src/git-providers/differ.js
@@ -84,3 +84,26 @@ export function getSlides(codes, language) {
       .filter(line => line.middle || line.left || line.right);
   });
 }
+
+export function getChanges(lines) {
+  const changes = [];
+  let currentChange = null;
+  let i = 0;
+  const isNewLine = i => !lines[i].left && lines[i].middle;
+  while (i < lines.length) {
+    if (isNewLine(i)) {
+      if (!currentChange) {
+        currentChange = { start: i };
+      }
+    } else {
+      if (currentChange) {
+        currentChange.end = i - 1;
+        changes.push(currentChange);
+        currentChange = null;
+      }
+    }
+    i++;
+  }
+
+  return changes;
+}
diff --git a/src/git-providers/versioner.worker.js b/src/git-providers/versioner.worker.js
index 3f95383..79284b6 100644
--- a/src/git-providers/versioner.worker.js
+++ b/src/git-providers/versioner.worker.js
@@ -1,5 +1,5 @@
 import { getLanguage, loadLanguage } from "./language-detector";
-import { getSlides } from "./differ";
+import { getSlides, getChanges } from "./differ";
 
 import github from "./github-commit-fetcher";
 import gitlab from "./gitlab-commit-fetcher";
@@ -25,5 +25,9 @@ export async function getVersions(source, params) {
 
   const codes = commits.map(commit => commit.content);
   const slides = getSlides(codes, lang);
-  return commits.map((commit, i) => ({ commit, lines: slides[i] }));
+  return commits.map((commit, i) => ({
+    commit,
+    lines: slides[i],
+    changes: getChanges(slides[i])
+  }));
 }
diff --git a/src/git-providers/vscode-provider.js b/src/git-providers/vscode-provider.js
index 3ed205c..a0dc299 100644
--- a/src/git-providers/vscode-provider.js
+++ b/src/git-providers/vscode-provider.js
@@ -1,5 +1,5 @@
 import { getLanguage, loadLanguage } from "./language-detector";
-import { getSlides } from "./differ";
+import { getSlides, getChanges } from "./differ";
 
 const vscode = window.vscode;
 
@@ -43,7 +43,11 @@ async function getVersions(last) {
 
   const codes = commits.map(commit => commit.content);
   const slides = getSlides(codes, lang);
-  return commits.map((commit, i) => ({ commit, lines: slides[i] }));
+  return commits.map((commit, i) => ({
+    commit,
+    lines: slides[i],
+    changes: getChanges(slides[i])
+  }));
 }
 
 export default {
diff --git a/src/history.js b/src/history.js
index 84fcb6e..d37f41a 100644
--- a/src/history.js
+++ b/src/history.js
@@ -99,14 +99,13 @@ function CommitList({ commits, currentIndex, selectCommit }) {
   );
 }
 
-export default function History({ commits, slideLines, loadMore }) {
-  return (
-    <Slides slideLines={slideLines} commits={commits} loadMore={loadMore} />
-  );
+export default function History({ versions, loadMore }) {
+  return <Slides versions={versions} loadMore={loadMore} />;
 }
 
-function Slides({ commits, slideLines, loadMore }) {
+function Slides({ versions, loadMore }) {
   const [current, target, setTarget] = useSliderSpring(0);
+  const commits = versions.map(v => v.commit);
   const setClampedTarget = newTarget => {
     setTarget(Math.min(commits.length - 0.75, Math.max(-0.25, newTarget)));
     if (newTarget >= commits.length - 5) {
@@ -140,7 +139,7 @@ function Slides({ commits, slideLines, loadMore }) {
         onSwipedRight={prevSlide}
         style={{ height: "100%" }}
       >
-        <Slide time={index - current} lines={slideLines[index]} />
+        <Slide time={index - current} version={versions[index]} />
       </Swipeable>
     </React.Fragment>
   );
diff --git a/src/scroller.js b/src/scroller.js
index 0b14a00..34c3f2c 100644
--- a/src/scroller.js
+++ b/src/scroller.js
@@ -74,7 +74,7 @@ export default function Scroller({
         if (newTop === prevState.currentTop && !prevState.snap) {
           return prevState;
         }
-        console.log("manual scroll", newTop);
+        // console.log("manual scroll", newTop);
         return {
           ...prevState,
           snap: false,
diff --git a/src/slide.js b/src/slide.js
index 46bde3d..d0d0ed9 100644
--- a/src/slide.js
+++ b/src/slide.js
@@ -72,39 +72,8 @@ function Slide({ lines, styles, changes }) {
   );
 }
 
-let lastLines = null;
-let lastChanges = null;
-function getChanges(lines) {
-  if (lastLines === lines) {
-    return lastChanges;
-  }
-
-  const changes = [];
-  let currentChange = null;
-  let i = 0;
-  const isNewLine = i => !lines[i].left && lines[i].middle;
-  while (i < lines.length) {
-    if (isNewLine(i)) {
-      if (!currentChange) {
-        currentChange = { start: i };
-      }
-    } else {
-      if (currentChange) {
-        currentChange.end = i - 1;
-        changes.push(currentChange);
-        currentChange = null;
-      }
-    }
-    i++;
-  }
-
-  lastLines = lines;
-  console.log("changes", changes);
-  return changes;
-}
-
-export default function SlideWrapper({ time, lines }) {
+export default function SlideWrapper({ time, version }) {
+  const { lines, changes } = version;
   const styles = animation((time + 1) / 2, lines);
-  const changes = React.useMemo(() => getChanges(lines), [lines]);
   return <Slide lines={lines} styles={styles} changes={changes} />;
 }