diff --git a/package-lock.json b/package-lock.json
index 12fd71a..701375c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1797,7 +1797,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -1818,12 +1819,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -1838,17 +1841,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -1965,7 +1971,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1977,6 +1984,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -1991,6 +1999,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -1998,12 +2007,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -2022,6 +2033,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -2102,7 +2114,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -2114,6 +2127,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -2199,7 +2213,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -2235,6 +2250,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -2254,6 +2270,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -2297,12 +2314,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -2910,6 +2929,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
       "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
     "lodash.memoize": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-3.0.4.tgz",
diff --git a/package.json b/package.json
index 2c787c9..b102d20 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "esprima": "^4.0.1",
     "estraverse": "^4.2.0",
-    "lodash": "^4.17.11"
+    "lodash": "^4.17.11",
+    "lodash.clonedeep": "^4.5.0"
   }
 }
diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx
index 9671a9a..4e67cb1 100644
--- a/src/app/components/App.jsx
+++ b/src/app/components/App.jsx
@@ -45,11 +45,16 @@ class App extends Component {
       isPlaying: false,
       isRecording: false,
       isPlayingIndex: 0,
+      id: 0,
+      action: {},
+      state: {},
+      prevState: {},
       eventTimes: [],
     };
 
     this.portToExtension = null;
     this.justStartedRecording = false;
+    this.hasInjectedScript = false;
 
     this.addActionToView = this.addActionToView.bind(this);
     this.toTheFuture = this.toTheFuture.bind(this);
@@ -71,9 +76,14 @@ class App extends Component {
       this.portToExtension = port;
 
       port.onMessage.addListener((msg) => {
+        // If the user paused the recording session, we return
+        const { isRecording } = this.state;
+        if (!isRecording) return;
+
         const newData = {
           action: msg.action,
           state: msg.state,
+          prevState: msg.prevState,
           id: this.state.data.length,
         };
 
@@ -115,7 +125,8 @@ class App extends Component {
 
   // functionality to change 'play' button to 'stop'
   setIsPlaying() {
-    if (this.state.isPlayingIndex >= this.state.data.length - 1) {
+    const { isPlayingIndex, data } = this.state;
+    if (isPlayingIndex >= data.length - 1) {
       return;
     }
 
@@ -130,19 +141,24 @@ class App extends Component {
 
   setIsRecording() {
     // This variable will prevent the app from refreshing when we refresh 
-    // the userpage. 
+    // the userpage.
     this.justStartedRecording = true;
-
+    const { isRecording, hasInjectedScript } = this.state;
     this.setState(state => ({
       isRecording: !state.isRecording,
     }));
 
+    // if we are hitting the pause or re-starting the record session
+    if (isRecording || hasInjectedScript) return;
+
+    this.setState({ hasInjectedScript: true });
+
     // we query the active window so we can send it to the background script
     // so it knows on which URL to run our devtool.
     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
       const { url } = tabs[0];
 
-      // backgroundPort is a variable made avaiable by the devtools.js 
+      // backgroundPort is a variable made avaiable by the devtools.js
       backgroundPort.postMessage({
         turnOnDevtool: true,
         url,
@@ -151,11 +167,11 @@ class App extends Component {
   }
 
   actionInPlay() {
-    const { data, isPlayingIndex } = this.state;
+    const { data, isPlayingIndex, isPlaying } = this.state;
 
     setTimeout(() => {
       this.toTheFuture();
-      if (this.state.isPlaying && isPlayingIndex + 1 < data.length - 1) {
+      if (isPlaying && isPlayingIndex + 1 < data.length - 1) {
         this.actionInPlay();
       } else {
         this.setState({ isPlaying: false });
@@ -169,10 +185,10 @@ class App extends Component {
     const { data } = this.state;
     const actionToView = data.filter(action => e.target.id === String(action.id));
     const {
-      action, id, state,
+      action, id, state, prevState,
     } = actionToView[0];
     this.setState({
-      action, id, state,
+      action, id, state, prevState,
     });
   }
 
@@ -197,7 +213,7 @@ class App extends Component {
   // time travel bar change
   handleBarChange(e) {
     const { data, isPlayingIndex } = this.state;
-    const { id, action, state } = data[e.target.value];
+    const { id, action, state, prevState } = data[e.target.value];
     // forward or past
     const currentIsPlayingIndex = e.target.value;
     const forward = currentIsPlayingIndex > isPlayingIndex;
@@ -205,6 +221,7 @@ class App extends Component {
       id,
       action,
       state,
+      prevState,
       isPlayingIndex: parseInt(currentIsPlayingIndex),
     });
     // Displays to screen
@@ -226,18 +243,15 @@ class App extends Component {
       direction: 'forward',
     });
 
-    // if (isPlayingIndex >= this.state.data.length - 1) isPlayingIndex = 0;
-
-    const { id, action, state } = data[isPlayingIndex + 1];
+    const { id, action, state, prevState } = data[isPlayingIndex + 1];
     this.setState(prev => ({
       ...prev,
       id,
       action,
       state,
+      prevState,
       isPlayingIndex: isPlayingIndex + 1,
     }));
-
-    console.log('isPlayingIndex', this.state.isPlayingIndex);
   }
 
   // function to travel to the PAST
@@ -251,12 +265,13 @@ class App extends Component {
       direction: 'backwards',
     });
 
-    const { id, action, state } = data[isPlayingIndex - 1];
+    const { id, action, state, prevState } = data[isPlayingIndex - 1];
     this.setState(prev => ({
       ...prev,
       id,
       action,
       state,
+      prevState,
       isPlayingIndex: isPlayingIndex - 1,
     }));
   }
@@ -275,6 +290,10 @@ class App extends Component {
       isPlaying: false,
       isRecording: false,
       isPlayingIndex: 0,
+      id: 0,
+      action: {},
+      state: {},
+      prevState: {},
     });
   }
 
@@ -284,12 +303,12 @@ class App extends Component {
       id,
       state,
       data,
-      setIsPlaying,
       isPlaying,
-      setIsRecording,
       isRecording,
       filteredData,
       searchField,
+      isPlayingIndex,
+      prevState,
       eventTimes,
     } = this.state;
 
@@ -316,6 +335,7 @@ class App extends Component {
                   action={action}
                   id={id}
                   actionState={state}
+                  prevState={prevState}
                 />
               )}
           />
@@ -324,7 +344,7 @@ class App extends Component {
             toTheFuture={this.toTheFuture}
             toThePast={this.toThePast}
             isPlaying={isPlaying}
-            isPlayingIndex={this.state.isPlayingIndex}
+            isPlayingIndex={isPlayingIndex}
             isRecording={isRecording}
             setIsPlaying={this.setIsPlaying}
             setIsRecording={this.setIsRecording}
@@ -335,4 +355,5 @@ class App extends Component {
     );
   }
 }
+
 export default App;
diff --git a/src/app/components/DetailCards/Effects/EffectsDisplay.jsx b/src/app/components/DetailCards/Effects/EffectsDisplay.jsx
index 8869fa7..5c29195 100644
--- a/src/app/components/DetailCards/Effects/EffectsDisplay.jsx
+++ b/src/app/components/DetailCards/Effects/EffectsDisplay.jsx
@@ -1,23 +1,23 @@
 import React from 'react';
-import { DetailsWrapper } from '../../../styles/Details.jsx';
 import ReactJson from 'react-json-view';
+import { DetailsWrapper } from '../../../styles/Details.jsx';
 // functionality
 // gets difference from previous state to new state
 import stateDifference from '../../stateDifference.jsx';
 
 
 export default function Effects(props) {
-  console.log('state differnce in effects display IMPORT', stateDifference);
-  const differenceOfPrevAndNextState = stateDifference([1,2,3], [2,4, 9, 11, {'wow': 1}])
+  const { prevState, actionState } = props;
+  const differenceOfPrevAndNextState = stateDifference(prevState, actionState);
+
   return (
     <DetailsWrapper>
       <ReactJson
-        theme={'threezerotwofour'}
+        theme="threezerotwofour"
         style={{ backgroundColor: 'transparent', height: '-webkit-fill-available' }}
         displayDataTypes={false}
         src={differenceOfPrevAndNextState}
       />
     </DetailsWrapper>
-    
   );
 }
diff --git a/src/app/components/stateDifference.jsx b/src/app/components/stateDifference.jsx
index b0af52c..b2df9ec 100644
--- a/src/app/components/stateDifference.jsx
+++ b/src/app/components/stateDifference.jsx
@@ -1,39 +1,39 @@
 
 function stateDifference(old, curr) {
-  
-    if(typeof(old) === "string" && typeof(curr) === "string") {
-      if(old === curr) return false;
-      return curr;
-    }
-    else if(typeof(old) === "number" && typeof(curr) === "number") {
-       if( old === curr) return false;
-       return curr;
-    }
-    else if(typeof(old) !== typeof(curr)) {
+
+  if(typeof(old) === "string" && typeof(curr) === "string") {
+    if(old === curr) return false;
+    return curr;
+  }
+  else if(typeof(old) === "number" && typeof(curr) === "number") {
+      if( old === curr) return false;
       return curr;
-    }
-    else if(Array.isArray(old) && Array.isArray(curr)) {
-      let newArr = [];
-      for ( let i = 0; i < curr.length; i++){
-        if(!old.includes(curr[i])){
-          let result = stateDifference(old[i], curr[i])
-          if (result) {
-            newArr.push(result)
-          }
-        }
-      } 
-      return newArr.length > 0 ? newArr : false;
-    }
-    else if(typeof(old) === "object" && typeof(curr) === "object") {
-      let newObj = {}
-      for ( let prop in curr) {
-        result = stateDifference(old[prop], curr[prop])
-        if (result){
-          newObj[prop] = result
+  }
+  else if(typeof(old) !== typeof(curr)) {
+    return curr;
+  }
+  else if(Array.isArray(old) && Array.isArray(curr)) {
+    let newArr = [];
+    for ( let i = 0; i < curr.length; i++){
+      if(!old.includes(curr[i])){
+        let result = stateDifference(old[i], curr[i])
+        if (result) {
+          newArr.push(result)
         }
       }
-      return Object.keys(newObj).length === 0 ? false : newObj
+    } 
+    return newArr.length > 0 ? newArr : false;
+  }
+  else if(typeof(old) === "object" && typeof(curr) === "object") {
+    let newObj = {}
+    for ( let prop in curr) {
+      let result = stateDifference(old[prop], curr[prop])
+      if (result) {
+        newObj[prop] = result
+      }
     }
+    return Object.keys(newObj).length === 0 ? false : newObj
   }
+}
 
-  export default stateDifference;
\ No newline at end of file
+export default stateDifference;
\ No newline at end of file
diff --git a/src/app/container/Details.jsx b/src/app/container/Details.jsx
index e1e731d..c005f2f 100644
--- a/src/app/container/Details.jsx
+++ b/src/app/container/Details.jsx
@@ -18,7 +18,7 @@ export default function Details(props) {
   // destructuring required info that's being passed down from App.jsx
   // passing these props onto children
   const {
-    action, id, actionState,
+    action, prevState, actionState,
   } = props;
 
   
@@ -34,7 +34,7 @@ export default function Details(props) {
         />
         <Route
           path='/effects'
-          render={props => <EffectsDisplay {...props} action={action} />}
+          render={props => <EffectsDisplay {...props} prevState={prevState} actionState={actionState} />}
         />
         <Route
           path='/state'
diff --git a/src/browser/chrome/background.js b/src/browser/chrome/background.js
index 7d810c6..e449eff 100644
--- a/src/browser/chrome/background.js
+++ b/src/browser/chrome/background.js
@@ -1,5 +1,9 @@
 const parseAndGenerate = require('./scripts/parser');
-const ports = [];
+const injectBundleStr = require('./scripts/inject_bundle');
+
+let ports = [];
+let interceptedUrl = '';
+let reqIndex = 0;
 
 chrome.tabs.onUpdated.addListener((id, info, tab) => {
   if (tab.status !== 'complete' || tab.url.startsWith('chrome')) return;
@@ -12,6 +16,8 @@ chrome.tabs.onUpdated.addListener((id, info, tab) => {
   });
 
   chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    interceptedUrl = '';
+    reqIndex = 0;
     notifyPorts(
       { action: 'refresh_devtool', tabId: tabs[0].id },
       'devtools',
@@ -19,21 +25,22 @@ chrome.tabs.onUpdated.addListener((id, info, tab) => {
   });
 });
 
-
-let interceptedUrl = '';
 function handleRequest(request) {
   // TODO: filter the request from the webRequest call.
   if (!interceptedUrl.startsWith(request.initiator)) return { cancel: false };
 
   if (request.type === 'script' && !request.url.startsWith('chrome')
-  && request.frameId === 0) {
-    // TODO: adjust comment
-    // Else we need to check wether or not this contains the react
-    // library. If it does, we need to send the edit javascript to
-    // out content script, so it can inject into the page. If it doesnt,
-    // we need to send the url to our content script so that it can
-    // add it to the page <script src=URL> AND add it to our cache, so
-    // that when we intercept it, we dont block it.
+    && request.frameId === 0 && ((request.url.slice(-3) === '.js')
+    || (request.url.slice(-4) === '.jsx'))) {
+    // If we just started intercepting requests, we want to add our injected
+    // bundle into the page.
+    if (reqIndex === 0) sendMessageToContent(injectBundleStr);
+
+    // To guarantee that the scripts are gonna be executed in order, we are
+    // gonna intercept EVERY request that is made. Then we have to download the
+    // script SYNC'ly since the webRequest API doesn't handle async. Last we
+    // send it to our content script to inject it back into the page. Either
+    // the React library with the extended functionality or the untouched script.
     const syncRequest = new XMLHttpRequest();
     syncRequest.open('GET', request.url, false);
     syncRequest.send(null);
@@ -58,6 +65,7 @@ chrome.runtime.onConnect.addListener((port) => {
       chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
         chrome.tabs.update(tabs[0].id, { url: tabs[0].url });
       });
+
     } else {
       console.log('Got a msg not turnOnDevtool: ', msg);
     }
@@ -71,62 +79,8 @@ function addScriptInterception() {
     { urls: ['<all_urls>'] },
     ['blocking'],
   );
-
-  // chrome.webRequest.onBeforeSendHeaders.addListener(
-  //   (request) => {
-  //     if (!interceptedUrl.startsWith(request.initiator)) return { cancel: false };
-
-  //     if (request.type !== 'script' || request.url.startsWith('chrome')
-  //       || request.frameId !== 0) return;
-
-  //     request.requestHeaders.push({
-  //       name: 'Access-Control-Allow-Credentials',
-  //       value: '*',
-  //     });
-
-  //     request.requestHeaders.push({
-  //       name: 'Accept',
-  //       value: 'application/javascript',
-  //     });
-
-  //     request.requestHeaders.push({
-  //       name: 'ABC',
-  //       value: 'abc',
-  //     });
-
-  //     for (let i = 0; i < request.requestHeaders.length; i++) {
-  //       const header = request.requestHeaders[i];
-  //       if (header.name === 'Origin') {
-  //         console.log('found one');
-  //         delete request.requestHeaders[i];
-  //       }
-  //     }
-
-  //     console.log('intercepting fom beforesendheaders:  ', request);
-  //   },
-  //   { urls: ['<all_urls>'] },
-  //   ['blocking', 'requestHeaders'],
-  // );
-
-  // chrome.webRequest.onHeadersReceived.addListener((request) => {
-  //   if (!interceptedUrl.startsWith(request.initiator)) return { cancel: false };
-
-  //   if (request.type !== 'script' || request.url.startsWith('chrome')
-  //     || request.frameId !== 0) return;
-
-  //   const syncRequest = new XMLHttpRequest();
-  //   syncRequest.open('GET', request.url, false);
-  //   syncRequest.send(null);
-
-  //   console.log('Got req onHeadersReceived!!!! ', request);
-
-  //   return { redirectUrl: 'data:application/javascript; charset=utf-8,'.concat(syncRequest.responseText) };
-  // },
-  // { urls: ['<all_urls>'] },
-  // ['blocking', 'responseHeaders']);
 }
 
-let reqIndex = 0;
 function sendMessageToContent(codeString) {
   const index = reqIndex++;
   chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
@@ -135,12 +89,17 @@ function sendMessageToContent(codeString) {
 }
 
 function notifyPorts(msg, portName) {
-  ports.forEach((port) => {
-    if (portName && (port.name !== portName)) return;
-    try {
-      port.postMessage(msg);
-    } catch {
-      console.log('notifyPorts has found some closed conections.');
+  let index = 0;
+  while (index < ports.length) {
+    if (portName && (ports[index].name !== portName)) index++;
+    else {
+      try {
+        ports[index].postMessage(msg);
+        index++;
+      } catch {
+        // remove closed port from array
+        ports = [...ports.slice(0, index), ...ports.slice(index + 1)];
+      }
     }
-  });
+  }
 }
diff --git a/src/browser/chrome/manifest.json b/src/browser/chrome/manifest.json
index 824425e..36df29a 100644
--- a/src/browser/chrome/manifest.json
+++ b/src/browser/chrome/manifest.json
@@ -21,11 +21,13 @@
     "tabs",
     "storage",
     "webRequest",
-    "webRequestBlocking"
+    "webRequestBlocking",
+    "webNavigation"
   ],
   "web_accessible_resources": [
     "scripts/linked_list.js",
-    "scripts/time_travel.js"
+    "scripts/time_travel.js",
+    "scripts/deepclone_bundle.js"
   ],
   "devtools_page": "devtools.html"
 }
\ No newline at end of file
diff --git a/src/browser/chrome/scripts/inject_bundle.js b/src/browser/chrome/scripts/inject_bundle.js
new file mode 100644
index 0000000..b426b99
--- /dev/null
+++ b/src/browser/chrome/scripts/inject_bundle.js
@@ -0,0 +1,907 @@
+module.exports =  `
+class DoublyLinkedListNode {
+  constructor(value, next = null, prev = null) {
+    this.value = value;
+    this.next = next;
+    this.prev = prev;
+  }
+}
+
+class DoublyLinkedList {
+  constructor() {
+    this.head = null;
+    this.tail = null;
+    this.current = null;
+  }
+
+  append(fiberNode) {
+    const newDLLNode = new DoublyLinkedListNode(fiberNode);
+
+    if (!this.head) {
+      this.head = newDLLNode;
+      this.tail = newDLLNode;
+      this.current = newDLLNode;
+    } else {
+      this.tail.next = newDLLNode;
+      newDLLNode.prev = this.tail;
+      this.tail = newDLLNode;
+    }
+
+    return this;
+  }
+}
+
+const funcStorage = {};
+let root = null;
+const timeTravelLList = new DoublyLinkedList();
+
+function timeTravel(direction) {
+  if (!root) {
+    root = getRootContainerInstance(timeTravelLList.current.value.effect);
+    timeTravelLList.current = timeTravelLList.tail;
+  }
+
+  const diff = direction === 'forward' ? 1 : -1;
+
+  if ((diff === 1 && timeTravelLList.current.next === null)
+    || (diff === -1 && timeTravelLList.current.prev === null)) {
+    return;
+  }
+
+  if (diff === 1 && timeTravelLList.current !== timeTravelLList.tail) {
+    timeTravelLList.current = timeTravelLList.current.next;
+  }
+
+  const {
+    commitDeletion,
+    commitPlacement,
+    commitWork,
+    prepareUpdate,
+  } = funcStorage;
+
+  while (true) {
+    // console.log('doing work for ', timeTravelTrackerIndex);
+    const { primaryEffectTag, effect } = timeTravelLList.current.value;
+
+    switch(primaryEffectTag) {
+      case 'UPDATE': {
+        const { current } = timeTravelLList.current.value;
+        
+        // if we are moving forwards, we need to commitWork() the same
+        // way the function was originally called.
+        if (diff === 1) {
+          commitWork(_.cloneDeep(current), _.cloneDeep(effect));
+          break;
+        }
+
+        // TODO: hacky solution. There must be some other edge-cases, so
+        // we should perform this check in a more generalized way.
+        if (effect.tag !== 6) {
+          // if the fiberNode is a HostText (tag = 6), the effect does NOT
+          // have an updateQueue. Otherwise, we need to get the .updateQueue
+          // value that represents this backwards transformation. This value
+          // is returned by the prepareUpdate function.
+          const payload = prepareUpdate(
+            effect.stateNode,
+            effect.type,
+            effect.memoizedProps,
+            current.memoizedProps,
+            root,
+            {},
+          );
+
+          const currentCopy = _.cloneDeep(current);
+          currentCopy.updateQueue = payload;
+          commitWork(_.cloneDeep(effect), currentCopy);
+          break;
+        }
+
+        commitWork(_.cloneDeep(effect), _.cloneDeep(current));
+        break;
+      }
+      case 'PLACEMENT': {
+        if (diff === 1) {
+          commitPlacement(_.cloneDeep(effect));
+        } else {
+          // commitDeletion() will call unmountHostComponents(), which recursively
+          // deletes all host nodes from the parent. This means that
+          // effect.return = null.  BUT we need that reference for later calls
+          // on commitPlacement() on this same node. This is why we need to clone
+          // the effect fiberNode and call commitDeletion() on that instead.
+          const effectCopy = _.cloneDeep(effect);
+          commitDeletion(effectCopy);
+        }
+        break;
+      }
+      case 'DELETION': {
+        if (diff === 1) {
+          // Refer to case 'PLACEMENT' as to why we need to clone.
+          const effectCopy = _.cloneDeep(effect);
+          commitDeletion(effectCopy);
+        } else {
+          commitPlacement(_.cloneDeep(effect));
+        }
+        break;
+      }
+      default:
+        break;
+    }
+
+    // break points for the while loop
+    if ((diff === -1 && timeTravelLList.current.prev === null)
+      || (diff === 1 && timeTravelLList.current.next === null)
+      || (diff === 1 && timeTravelLList.current.value.actionDispatched)) {
+      return;
+    }
+
+    timeTravelLList.current = diff === 1
+      ? timeTravelLList.current.next
+      : timeTravelLList.current.prev;
+
+    if (diff === -1 && timeTravelLList.current.value.actionDispatched) {
+      return;
+    }
+  }
+}
+
+function getRootContainerInstance(fiberNode) {
+  let current = fiberNode;
+  while (current.return) current = current.return;
+  return current.stateNode.containerInfo;
+}
+
+window.addEventListener('message', (msg) => {
+  if (msg.data.type === 'TIMETRAVEL') {
+    timeTravel(msg.data.direction);
+  }
+});
+
+const _ = {};
+(function() {
+  function r(e, n, t) {
+    function o(i, f) {
+      if (!n[i]) {
+        if (!e[i]) {
+          var c = "function" == typeof require && require;
+          if (!f && c) return c(i, !0);
+          if (u) return u(i, !0);
+          var a = new Error("Cannot find module '" + i + "'");
+          throw a.code = "MODULE_NOT_FOUND", a
+        }
+        var p = n[i] = {
+          exports: {}
+        };
+        e[i][0].call(p.exports, function(r) {
+          var n = e[i][1][r];
+          return o(n || r)
+        }, p, p.exports, r, e, n, t)
+      }
+      return n[i].exports
+    }
+    for (var u = "function" == typeof require && require, i = 0; i < t.length; i++) o(t[i]);
+    return o
+  }
+  return r
+})()({
+  1: [function(require, module, exports) {
+    (function(global) {
+      var LARGE_ARRAY_SIZE = 200;
+      var HASH_UNDEFINED = '__lodash_hash_undefined__';
+      var MAX_SAFE_INTEGER = 9007199254740991;
+      var argsTag = '[object Arguments]',
+        arrayTag = '[object Array]',
+        boolTag = '[object Boolean]',
+        dateTag = '[object Date]',
+        errorTag = '[object Error]',
+        funcTag = '[object Function]',
+        genTag = '[object GeneratorFunction]',
+        mapTag = '[object Map]',
+        numberTag = '[object Number]',
+        objectTag = '[object Object]',
+        promiseTag = '[object Promise]',
+        regexpTag = '[object RegExp]',
+        setTag = '[object Set]',
+        stringTag = '[object String]',
+        symbolTag = '[object Symbol]',
+        weakMapTag = '[object WeakMap]';
+      var arrayBufferTag = '[object ArrayBuffer]',
+        dataViewTag = '[object DataView]',
+        float32Tag = '[object Float32Array]',
+        float64Tag = '[object Float64Array]',
+        int8Tag = '[object Int8Array]',
+        int16Tag = '[object Int16Array]',
+        int32Tag = '[object Int32Array]',
+        uint8Tag = '[object Uint8Array]',
+        uint8ClampedTag = '[object Uint8ClampedArray]',
+        uint16Tag = '[object Uint16Array]',
+        uint32Tag = '[object Uint32Array]';
+      var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+      var reFlags = /\w*$/;
+      var reIsHostCtor = /^\[object .+?Constructor\]$/;
+      var reIsUint = /^(?:0|[1-9]\d*)$/;
+      var cloneableTags = {};
+      cloneableTags[argsTag] = cloneableTags[arrayTag] = cloneableTags[arrayBufferTag] = cloneableTags[dataViewTag] = cloneableTags[boolTag] = cloneableTags[dateTag] = cloneableTags[float32Tag] = cloneableTags[float64Tag] = cloneableTags[int8Tag] = cloneableTags[int16Tag] = cloneableTags[int32Tag] = cloneableTags[mapTag] = cloneableTags[numberTag] = cloneableTags[objectTag] = cloneableTags[regexpTag] = cloneableTags[setTag] = cloneableTags[stringTag] = cloneableTags[symbolTag] = cloneableTags[uint8Tag] = cloneableTags[uint8ClampedTag] = cloneableTags[uint16Tag] = cloneableTags[uint32Tag] = true;
+      cloneableTags[errorTag] = cloneableTags[funcTag] = cloneableTags[weakMapTag] = false;
+      var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
+      var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+      var root = freeGlobal || freeSelf || Function('return this')();
+      var freeExports = typeof exports == 'object' && exports && !exports.nodeType && exports;
+      var freeModule = freeExports && typeof module == 'object' && module && !module.nodeType && module;
+      var moduleExports = freeModule && freeModule.exports === freeExports;
+
+      function addMapEntry(map, pair) {
+        map.set(pair[0], pair[1]);
+        return map;
+      }
+
+      function addSetEntry(set, value) {
+        set.add(value);
+        return set;
+      }
+
+      function arrayEach(array, iteratee) {
+        var index = -1,
+          length = array ? array.length : 0;
+        while (++index < length) {
+          if (iteratee(array[index], index, array) === false) {
+            break;
+          }
+        }
+        return array;
+      }
+
+      function arrayPush(array, values) {
+        var index = -1,
+          length = values.length,
+          offset = array.length;
+        while (++index < length) {
+          array[offset + index] = values[index];
+        }
+        return array;
+      }
+
+      function arrayReduce(array, iteratee, accumulator, initAccum) {
+        var index = -1,
+          length = array ? array.length : 0;
+        if (initAccum && length) {
+          accumulator = array[++index];
+        }
+        while (++index < length) {
+          accumulator = iteratee(accumulator, array[index], index, array);
+        }
+        return accumulator;
+      }
+
+      function baseTimes(n, iteratee) {
+        var index = -1,
+          result = Array(n);
+        while (++index < n) {
+          result[index] = iteratee(index);
+        }
+        return result;
+      }
+
+      function getValue(object, key) {
+        return object == null ? undefined : object[key];
+      }
+
+      function isHostObject(value) {
+        var result = false;
+        if (value != null && typeof value.toString != 'function') {
+          try {
+            result = !!(value + '');
+          } catch (e) {}
+        }
+        return result;
+      }
+
+      function mapToArray(map) {
+        var index = -1,
+          result = Array(map.size);
+        map.forEach(function(value, key) {
+          result[++index] = [key, value];
+        });
+        return result;
+      }
+
+      function overArg(func, transform) {
+        return function(arg) {
+          return func(transform(arg));
+        };
+      }
+
+      function setToArray(set) {
+        var index = -1,
+          result = Array(set.size);
+        set.forEach(function(value) {
+          result[++index] = value;
+        });
+        return result;
+      }
+      var arrayProto = Array.prototype,
+        funcProto = Function.prototype,
+        objectProto = Object.prototype;
+      var coreJsData = root['__core-js_shared__'];
+      var maskSrcKey = (function() {
+        var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');
+        return uid ? ('Symbol(src)_1.' + uid) : '';
+      }());
+      var funcToString = funcProto.toString;
+      var hasOwnProperty = objectProto.hasOwnProperty;
+      var objectToString = objectProto.toString;
+      var reIsNative = RegExp('^' + funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&').replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$');
+      var Buffer = moduleExports ? root.Buffer : undefined,
+        Symbol = root.Symbol,
+        Uint8Array = root.Uint8Array,
+        getPrototype = overArg(Object.getPrototypeOf, Object),
+        objectCreate = Object.create,
+        propertyIsEnumerable = objectProto.propertyIsEnumerable,
+        splice = arrayProto.splice;
+      var nativeGetSymbols = Object.getOwnPropertySymbols,
+        nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined,
+        nativeKeys = overArg(Object.keys, Object);
+      var DataView = getNative(root, 'DataView'),
+        Map = getNative(root, 'Map'),
+        Promise = getNative(root, 'Promise'),
+        Set = getNative(root, 'Set'),
+        WeakMap = getNative(root, 'WeakMap'),
+        nativeCreate = getNative(Object, 'create');
+      var dataViewCtorString = toSource(DataView),
+        mapCtorString = toSource(Map),
+        promiseCtorString = toSource(Promise),
+        setCtorString = toSource(Set),
+        weakMapCtorString = toSource(WeakMap);
+      var symbolProto = Symbol ? Symbol.prototype : undefined,
+        symbolValueOf = symbolProto ? symbolProto.valueOf : undefined;
+
+      function Hash(entries) {
+        var index = -1,
+          length = entries ? entries.length : 0;
+        this.clear();
+        while (++index < length) {
+          var entry = entries[index];
+          this.set(entry[0], entry[1]);
+        }
+      }
+
+      function hashClear() {
+        this.__data__ = nativeCreate ? nativeCreate(null) : {};
+      }
+
+      function hashDelete(key) {
+        return this.has(key) && delete this.__data__[key];
+      }
+
+      function hashGet(key) {
+        var data = this.__data__;
+        if (nativeCreate) {
+          var result = data[key];
+          return result === HASH_UNDEFINED ? undefined : result;
+        }
+        return hasOwnProperty.call(data, key) ? data[key] : undefined;
+      }
+
+      function hashHas(key) {
+        var data = this.__data__;
+        return nativeCreate ? data[key] !== undefined : hasOwnProperty.call(data, key);
+      }
+
+      function hashSet(key, value) {
+        var data = this.__data__;
+        data[key] = (nativeCreate && value === undefined) ? HASH_UNDEFINED : value;
+        return this;
+      }
+      Hash.prototype.clear = hashClear;
+      Hash.prototype['delete'] = hashDelete;
+      Hash.prototype.get = hashGet;
+      Hash.prototype.has = hashHas;
+      Hash.prototype.set = hashSet;
+
+      function ListCache(entries) {
+        var index = -1,
+          length = entries ? entries.length : 0;
+        this.clear();
+        while (++index < length) {
+          var entry = entries[index];
+          this.set(entry[0], entry[1]);
+        }
+      }
+
+      function listCacheClear() {
+        this.__data__ = [];
+      }
+
+      function listCacheDelete(key) {
+        var data = this.__data__,
+          index = assocIndexOf(data, key);
+        if (index < 0) {
+          return false;
+        }
+        var lastIndex = data.length - 1;
+        if (index == lastIndex) {
+          data.pop();
+        } else {
+          splice.call(data, index, 1);
+        }
+        return true;
+      }
+
+      function listCacheGet(key) {
+        var data = this.__data__,
+          index = assocIndexOf(data, key);
+        return index < 0 ? undefined : data[index][1];
+      }
+
+      function listCacheHas(key) {
+        return assocIndexOf(this.__data__, key) > -1;
+      }
+
+      function listCacheSet(key, value) {
+        var data = this.__data__,
+          index = assocIndexOf(data, key);
+        if (index < 0) {
+          data.push([key, value]);
+        } else {
+          data[index][1] = value;
+        }
+        return this;
+      }
+      ListCache.prototype.clear = listCacheClear;
+      ListCache.prototype['delete'] = listCacheDelete;
+      ListCache.prototype.get = listCacheGet;
+      ListCache.prototype.has = listCacheHas;
+      ListCache.prototype.set = listCacheSet;
+
+      function MapCache(entries) {
+        var index = -1,
+          length = entries ? entries.length : 0;
+        this.clear();
+        while (++index < length) {
+          var entry = entries[index];
+          this.set(entry[0], entry[1]);
+        }
+      }
+
+      function mapCacheClear() {
+        this.__data__ = {
+          'hash': new Hash,
+          'map': new(Map || ListCache),
+          'string': new Hash
+        };
+      }
+
+      function mapCacheDelete(key) {
+        return getMapData(this, key)['delete'](key);
+      }
+
+      function mapCacheGet(key) {
+        return getMapData(this, key).get(key);
+      }
+
+      function mapCacheHas(key) {
+        return getMapData(this, key).has(key);
+      }
+
+      function mapCacheSet(key, value) {
+        getMapData(this, key).set(key, value);
+        return this;
+      }
+      MapCache.prototype.clear = mapCacheClear;
+      MapCache.prototype['delete'] = mapCacheDelete;
+      MapCache.prototype.get = mapCacheGet;
+      MapCache.prototype.has = mapCacheHas;
+      MapCache.prototype.set = mapCacheSet;
+
+      function Stack(entries) {
+        this.__data__ = new ListCache(entries);
+      }
+
+      function stackClear() {
+        this.__data__ = new ListCache;
+      }
+
+      function stackDelete(key) {
+        return this.__data__['delete'](key);
+      }
+
+      function stackGet(key) {
+        return this.__data__.get(key);
+      }
+
+      function stackHas(key) {
+        return this.__data__.has(key);
+      }
+
+      function stackSet(key, value) {
+        var cache = this.__data__;
+        if (cache instanceof ListCache) {
+          var pairs = cache.__data__;
+          if (!Map || (pairs.length < LARGE_ARRAY_SIZE - 1)) {
+            pairs.push([key, value]);
+            return this;
+          }
+          cache = this.__data__ = new MapCache(pairs);
+        }
+        cache.set(key, value);
+        return this;
+      }
+      Stack.prototype.clear = stackClear;
+      Stack.prototype['delete'] = stackDelete;
+      Stack.prototype.get = stackGet;
+      Stack.prototype.has = stackHas;
+      Stack.prototype.set = stackSet;
+
+      function arrayLikeKeys(value, inherited) {
+        var result = (isArray(value) || isArguments(value)) ? baseTimes(value.length, String) : [];
+        var length = result.length,
+          skipIndexes = !!length;
+        for (var key in value) {
+          if ((inherited || hasOwnProperty.call(value, key)) && !(skipIndexes && (key == 'length' || isIndex(key, length)))) {
+            result.push(key);
+          }
+        }
+        return result;
+      }
+
+      function assignValue(object, key, value) {
+        var objValue = object[key];
+        if (!(hasOwnProperty.call(object, key) && eq(objValue, value)) || (value === undefined && !(key in object))) {
+          object[key] = value;
+        }
+      }
+
+      function assocIndexOf(array, key) {
+        var length = array.length;
+        while (length--) {
+          if (eq(array[length][0], key)) {
+            return length;
+          }
+        }
+        return -1;
+      }
+
+      function baseAssign(object, source) {
+        return object && copyObject(source, keys(source), object);
+      }
+
+      function baseClone(value, isDeep, isFull, customizer, key, object, stack) {
+        var result;
+        if (customizer) {
+          result = object ? customizer(value, key, object, stack) : customizer(value);
+        }
+        if (result !== undefined) {
+          return result;
+        }
+        if (!isObject(value)) {
+          return value;
+        }
+        var isArr = isArray(value);
+        if (isArr) {
+          result = initCloneArray(value);
+          if (!isDeep) {
+            return copyArray(value, result);
+          }
+        } else {
+          var tag = getTag(value),
+            isFunc = tag == funcTag || tag == genTag;
+          if (isBuffer(value)) {
+            return cloneBuffer(value, isDeep);
+          }
+          if (tag == objectTag || tag == argsTag || (isFunc && !object)) {
+            if (isHostObject(value)) {
+              return object ? value : {};
+            }
+            result = initCloneObject(isFunc ? {} : value);
+            if (!isDeep) {
+              return copySymbols(value, baseAssign(result, value));
+            }
+          } else {
+            if (!cloneableTags[tag]) {
+              return object ? value : {};
+            }
+            result = initCloneByTag(value, tag, baseClone, isDeep);
+          }
+        }
+        stack || (stack = new Stack);
+        var stacked = stack.get(value);
+        if (stacked) {
+          return stacked;
+        }
+        stack.set(value, result);
+        if (!isArr) {
+          var props = isFull ? getAllKeys(value) : keys(value);
+        }
+        arrayEach(props || value, function(subValue, key) {
+          if (props) {
+            key = subValue;
+            subValue = value[key];
+          }
+          assignValue(result, key, baseClone(subValue, isDeep, isFull, customizer, key, value, stack));
+        });
+        return result;
+      }
+
+      function baseCreate(proto) {
+        return isObject(proto) ? objectCreate(proto) : {};
+      }
+
+      function baseGetAllKeys(object, keysFunc, symbolsFunc) {
+        var result = keysFunc(object);
+        return isArray(object) ? result : arrayPush(result, symbolsFunc(object));
+      }
+
+      function baseGetTag(value) {
+        return objectToString.call(value);
+      }
+
+      function baseIsNative(value) {
+        if (!isObject(value) || isMasked(value)) {
+          return false;
+        }
+        var pattern = (isFunction(value) || isHostObject(value)) ? reIsNative : reIsHostCtor;
+        return pattern.test(toSource(value));
+      }
+
+      function baseKeys(object) {
+        if (!isPrototype(object)) {
+          return nativeKeys(object);
+        }
+        var result = [];
+        for (var key in Object(object)) {
+          if (hasOwnProperty.call(object, key) && key != 'constructor') {
+            result.push(key);
+          }
+        }
+        return result;
+      }
+
+      function cloneBuffer(buffer, isDeep) {
+        if (isDeep) {
+          return buffer.slice();
+        }
+        var result = new buffer.constructor(buffer.length);
+        buffer.copy(result);
+        return result;
+      }
+
+      function cloneArrayBuffer(arrayBuffer) {
+        var result = new arrayBuffer.constructor(arrayBuffer.byteLength);
+        new Uint8Array(result).set(new Uint8Array(arrayBuffer));
+        return result;
+      }
+
+      function cloneDataView(dataView, isDeep) {
+        var buffer = isDeep ? cloneArrayBuffer(dataView.buffer) : dataView.buffer;
+        return new dataView.constructor(buffer, dataView.byteOffset, dataView.byteLength);
+      }
+
+      function cloneMap(map, isDeep, cloneFunc) {
+        var array = isDeep ? cloneFunc(mapToArray(map), true) : mapToArray(map);
+        return arrayReduce(array, addMapEntry, new map.constructor);
+      }
+
+      function cloneRegExp(regexp) {
+        var result = new regexp.constructor(regexp.source, reFlags.exec(regexp));
+        result.lastIndex = regexp.lastIndex;
+        return result;
+      }
+
+      function cloneSet(set, isDeep, cloneFunc) {
+        var array = isDeep ? cloneFunc(setToArray(set), true) : setToArray(set);
+        return arrayReduce(array, addSetEntry, new set.constructor);
+      }
+
+      function cloneSymbol(symbol) {
+        return symbolValueOf ? Object(symbolValueOf.call(symbol)) : {};
+      }
+
+      function cloneTypedArray(typedArray, isDeep) {
+        var buffer = isDeep ? cloneArrayBuffer(typedArray.buffer) : typedArray.buffer;
+        return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length);
+      }
+
+      function copyArray(source, array) {
+        var index = -1,
+          length = source.length;
+        array || (array = Array(length));
+        while (++index < length) {
+          array[index] = source[index];
+        }
+        return array;
+      }
+
+      function copyObject(source, props, object, customizer) {
+        object || (object = {});
+        var index = -1,
+          length = props.length;
+        while (++index < length) {
+          var key = props[index];
+          var newValue = customizer ? customizer(object[key], source[key], key, object, source) : undefined;
+          assignValue(object, key, newValue === undefined ? source[key] : newValue);
+        }
+        return object;
+      }
+
+      function copySymbols(source, object) {
+        return copyObject(source, getSymbols(source), object);
+      }
+
+      function getAllKeys(object) {
+        return baseGetAllKeys(object, keys, getSymbols);
+      }
+
+      function getMapData(map, key) {
+        var data = map.__data__;
+        return isKeyable(key) ? data[typeof key == 'string' ? 'string' : 'hash'] : data.map;
+      }
+
+      function getNative(object, key) {
+        var value = getValue(object, key);
+        return baseIsNative(value) ? value : undefined;
+      }
+      var getSymbols = nativeGetSymbols ? overArg(nativeGetSymbols, Object) : stubArray;
+      var getTag = baseGetTag;
+      if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag) || (Map && getTag(new Map) != mapTag) || (Promise && getTag(Promise.resolve()) != promiseTag) || (Set && getTag(new Set) != setTag) || (WeakMap && getTag(new WeakMap) != weakMapTag)) {
+        getTag = function(value) {
+          var result = objectToString.call(value),
+            Ctor = result == objectTag ? value.constructor : undefined,
+            ctorString = Ctor ? toSource(Ctor) : undefined;
+          if (ctorString) {
+            switch (ctorString) {
+              case dataViewCtorString:
+                return dataViewTag;
+              case mapCtorString:
+                return mapTag;
+              case promiseCtorString:
+                return promiseTag;
+              case setCtorString:
+                return setTag;
+              case weakMapCtorString:
+                return weakMapTag;
+            }
+          }
+          return result;
+        };
+      }
+
+      function initCloneArray(array) {
+        var length = array.length,
+          result = array.constructor(length);
+        if (length && typeof array[0] == 'string' && hasOwnProperty.call(array, 'index')) {
+          result.index = array.index;
+          result.input = array.input;
+        }
+        return result;
+      }
+
+      function initCloneObject(object) {
+        return (typeof object.constructor == 'function' && !isPrototype(object)) ? baseCreate(getPrototype(object)) : {};
+      }
+
+      function initCloneByTag(object, tag, cloneFunc, isDeep) {
+        var Ctor = object.constructor;
+        switch (tag) {
+          case arrayBufferTag:
+            return cloneArrayBuffer(object);
+          case boolTag:
+          case dateTag:
+            return new Ctor(+object);
+          case dataViewTag:
+            return cloneDataView(object, isDeep);
+          case float32Tag:
+          case float64Tag:
+          case int8Tag:
+          case int16Tag:
+          case int32Tag:
+          case uint8Tag:
+          case uint8ClampedTag:
+          case uint16Tag:
+          case uint32Tag:
+            return cloneTypedArray(object, isDeep);
+          case mapTag:
+            return cloneMap(object, isDeep, cloneFunc);
+          case numberTag:
+          case stringTag:
+            return new Ctor(object);
+          case regexpTag:
+            return cloneRegExp(object);
+          case setTag:
+            return cloneSet(object, isDeep, cloneFunc);
+          case symbolTag:
+            return cloneSymbol(object);
+        }
+      }
+
+      function isIndex(value, length) {
+        length = length == null ? MAX_SAFE_INTEGER : length;
+        return !!length && (typeof value == 'number' || reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
+      }
+
+      function isKeyable(value) {
+        var type = typeof value;
+        return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean') ? (value !== '__proto__') : (value === null);
+      }
+
+      function isMasked(func) {
+        return !!maskSrcKey && (maskSrcKey in func);
+      }
+
+      function isPrototype(value) {
+        var Ctor = value && value.constructor,
+          proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto;
+        return value === proto;
+      }
+
+      function toSource(func) {
+        if (func != null) {
+          try {
+            return funcToString.call(func);
+          } catch (e) {}
+          try {
+            return (func + '');
+          } catch (e) {}
+        }
+        return '';
+      }
+
+      function cloneDeep(value) {
+        return baseClone(value, true, true);
+      }
+
+      function eq(value, other) {
+        return value === other || (value !== value && other !== other);
+      }
+
+      function isArguments(value) {
+        return isArrayLikeObject(value) && hasOwnProperty.call(value, 'callee') && (!propertyIsEnumerable.call(value, 'callee') || objectToString.call(value) == argsTag);
+      }
+      var isArray = Array.isArray;
+
+      function isArrayLike(value) {
+        return value != null && isLength(value.length) && !isFunction(value);
+      }
+
+      function isArrayLikeObject(value) {
+        return isObjectLike(value) && isArrayLike(value);
+      }
+      var isBuffer = nativeIsBuffer || stubFalse;
+
+      function isFunction(value) {
+        var tag = isObject(value) ? objectToString.call(value) : '';
+        return tag == funcTag || tag == genTag;
+      }
+
+      function isLength(value) {
+        return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
+      }
+
+      function isObject(value) {
+        var type = typeof value;
+        return !!value && (type == 'object' || type == 'function');
+      }
+
+      function isObjectLike(value) {
+        return !!value && typeof value == 'object';
+      }
+
+      function keys(object) {
+        return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);
+      }
+
+      function stubArray() {
+        return [];
+      }
+
+      function stubFalse() {
+        return false;
+      }
+      module.exports = cloneDeep;
+    }).call(this, typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+  }, {}],
+  2: [function(require, module, exports) {
+    _.cloneDeep = require('lodash.clonedeep');
+  }, {
+    "lodash.clonedeep": 1
+  }]
+}, {}, [2]);
+`
\ No newline at end of file
diff --git a/src/browser/chrome/scripts/inject_script_tags.js b/src/browser/chrome/scripts/inject_script_tags.js
index e6250fd..629e027 100644
--- a/src/browser/chrome/scripts/inject_script_tags.js
+++ b/src/browser/chrome/scripts/inject_script_tags.js
@@ -1,52 +1,37 @@
-// We add a <script> tag to the DOM with our script files as the src attribute.
-// We need this because our content-injected scripts are executed in an "isolated
-// world" environment. BUT for the scripts below, we want the edited-React libraries
-// to have access to the their functionalities.
-
-// const linkedListScript = document.createElement('script');
-// linkedListScript.src = chrome.runtime.getURL('scripts/linked_list.js');
-// (document.head || document.documentElement).appendChild(linkedListScript);
-
-const timeTravelScript = document.createElement('script');
-timeTravelScript.src = chrome.runtime.getURL('scripts/time_travel.js');
-(document.head || document.documentElement).appendChild(timeTravelScript);
-
-// linkedListScript.onload = 
-timeTravelScript.onload = function removeScriptTag() {
-  this.remove();
-};
-
-const scriptsToParse = [];
-let lastReceivedMsgTime = null;
-
-chrome.runtime.onMessage.addListener(scheduleWork);
-
-function scheduleWork(work) {
-  // We want to add the scripts to a work array. When its been 100s
-  // without receiving any new scripts, then we sort the array and
-  // add all scripts to the page.
-  if (work) scriptsToParse.push(work);
-
-  if (Date.now() - lastReceivedMsgTime > 100 && lastReceivedMsgTime !== null) {
-    lastReceivedMsgTime = null;
-    addScriptToPage();
-  } else {
-    if (work) lastReceivedMsgTime = Date.now();
-    setTimeout(scheduleWork, 50);
+(function addListeners() {
+  const scriptsToParse = [];
+  let lastReceivedMsgTime = null;
+  chrome.runtime.onMessage.addListener((msg) => {
+    if (msg.codeString) scheduleWork(msg);
+  });
+
+  function scheduleWork(work) {
+    // We want to add the scripts to a work array. When its been 100s
+    // without receiving any new scripts, then we sort the array and
+    // add all scripts to the page.
+    if (work) scriptsToParse.push(work);
+
+    if (Date.now() - lastReceivedMsgTime > 100 && lastReceivedMsgTime !== null) {
+      lastReceivedMsgTime = null;
+      addScriptToPage();
+    } else {
+      if (work) lastReceivedMsgTime = Date.now();
+      setTimeout(scheduleWork, 50);
+    }
   }
-}
-
-function addScriptToPage() {
-  // First we sort the array by index, then we add everything to page
-  scriptsToParse.sort((a, b) => a.index - b.index);
-  while (scriptsToParse.length > 0) {
-    const { codeString } = scriptsToParse.shift();
 
-    const script = document.createElement('script');
-    script.innerHTML = codeString;
-    (document.head || document.documentElement).appendChild(script);
-    script.onload = function removeScriptTag() {
-      this.remove();
-    };
+  function addScriptToPage() {
+    // First we sort the array by index, then we add everything to page
+    scriptsToParse.sort((a, b) => a.index - b.index);
+    while (scriptsToParse.length > 0) {
+      const { codeString } = scriptsToParse.shift();
+
+      const script = document.createElement('script');
+      script.innerHTML = codeString;
+      (document.head || document.documentElement).appendChild(script);
+      script.onload = function removeScriptTag() {
+        this.remove();
+      };
+    }
   }
-}
+}());
diff --git a/src/browser/chrome/scripts/parser.js b/src/browser/chrome/scripts/parser.js
index 1a74618..a2375cd 100644
--- a/src/browser/chrome/scripts/parser.js
+++ b/src/browser/chrome/scripts/parser.js
@@ -12,12 +12,13 @@ function useReducerReplacement() {
       type: 'DISPATCH',
       data: {
         state: newState,
+        prevState: state,
         action,
       },
     });
     return newState;
   }
-  return dispatcher.useReducer(reducerWithTracker, initialState, initialAction);
+  return dispatcher.useReducer(reducerWithTracker, arguments[1], arguments[2]);
 }
 
 function commitAllHostEffectsReplacement() {
@@ -177,5 +178,6 @@ const parseAndGenerate = (codeString) => {
     console.log('returning code.');
     return code;
   }
+  return codeString;
 };
 module.exports = parseAndGenerate;
diff --git a/src/browser/chrome/scripts/time_travel.js b/src/browser/chrome/scripts/time_travel.js
index ede68f8..efb6a5f 100644
--- a/src/browser/chrome/scripts/time_travel.js
+++ b/src/browser/chrome/scripts/time_travel.js
@@ -1,36 +1,3 @@
-class DoublyLinkedListNode {
-  constructor(value, next = null, prev = null) {
-    this.value = value;
-    this.next = next;
-    this.prev = prev;
-  }
-}
-
-class DoublyLinkedList {
-  constructor() {
-    this.head = null;
-    this.tail = null;
-    this.current = null;
-  }
-
-  append(fiberNode) {
-    const newDLLNode = new DoublyLinkedListNode(fiberNode);
-
-    if (!this.head) {
-      this.head = newDLLNode;
-      this.tail = newDLLNode;
-      this.current = newDLLNode;
-    } else {
-      this.tail.next = newDLLNode;
-      newDLLNode.prev = this.tail;
-      this.tail = newDLLNode;
-    }
-
-    return this;
-  }
-}
-
-
 const funcStorage = {};
 let root = null;
 const timeTravelLList = new DoublyLinkedList();