diff --git a/repl/README.md b/repl/README.md
index ebc05fe5..dbc90c5d 100644
--- a/repl/README.md
+++ b/repl/README.md
@@ -47,5 +47,5 @@ currently broken / buggy:
   - => draw was choppy + that also caused useHighlighting bugs
 - [x] pianoroll keeps rolling when pressing stop
 - [x] find a way to display errors when console is closed / another tab selected
-- [ ] highlighting out of range error is back (delete large chunk at the top while highlighting below is triggered)
+- [x] highlighting out of range error is back (delete large chunk at the top while highlighting below is triggered)
 - [ ] idea: interpolate between running and evaluated code!
diff --git a/repl/src/App.jsx b/repl/src/App.jsx
index 741cd351..ef2346c2 100644
--- a/repl/src/App.jsx
+++ b/repl/src/App.jsx
@@ -173,10 +173,17 @@ function App() {
   // UI Actions
   //
 
-  const handleChangeCode = (c) => {
-    setCode(c);
-    started && logger('[edit] code changed. hit ctrl+enter to update');
-  };
+  const handleChangeCode = useCallback(
+    (c) => {
+      setCode(c);
+      started && logger('[edit] code changed. hit ctrl+enter to update');
+    },
+    [started],
+  );
+  const handleSelectionChange = useCallback((selection) => {
+    // TODO: scroll to selected function in reference
+    // console.log('selectino change', selection.ranges[0].from);
+  }, []);
   const handleTogglePlay = async () => {
     await getAudioContext().resume(); // fixes no sound in ios webkit
     if (!started) {
@@ -259,10 +266,7 @@ function App() {
             value={code}
             onChange={handleChangeCode}
             onViewChanged={setView}
-            onSelectionChange={(selection) => {
-              // TODO: scroll to selected function in reference
-              // console.log('selectino change', selection.ranges[0].from);
-            }}
+            onSelectionChange={handleSelectionChange}
           />
         </section>
         {error && (