From 529ad1d4bdb34a55974065bc786368db0bbd9f6c Mon Sep 17 00:00:00 2001
From: Joeri Exelmans <joeri.exelmans@gmail.com>
Date: Thu, 23 Oct 2025 22:10:18 +0200
Subject: [PATCH] wrap some more callbacks in useCallback

---
 src/App/App.tsx | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/App/App.tsx b/src/App/App.tsx
index 520eb62..62c2e62 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -92,14 +92,14 @@ export function App() {
   const refRightSideBar = useRef<HTMLDivElement>(null);
 
   // append editor state to undo history
-  function makeCheckPoint() {
+  const makeCheckPoint = useCallback(() => {
     setHistoryState(historyState => ({
       ...historyState,
       history: [...historyState.history, historyState.current],
       future: [],
     }));
-  }
-  function onUndo() {
+  }, [setHistoryState]);
+  const onUndo = useCallback(() => {
     setHistoryState(historyState => {
       if (historyState.history.length === 0) {
         return historyState; // no change
@@ -110,8 +110,8 @@ export function App() {
         future: [...historyState.future, historyState.current],
       }
     })
-  }
-  function onRedo() {
+  }, [setHistoryState]);
+  const onRedo = useCallback(() => {
     setHistoryState(historyState => {
       if (historyState.future.length === 0) {
         return historyState; // no change
@@ -122,7 +122,7 @@ export function App() {
         future: historyState.future.slice(0,-1),
       }
     });
-  }
+  }, [setHistoryState]);
   
   function onInit() {
     const timestampedEvent = {simtime: 0, inputEvent: "<init>"};
@@ -143,12 +143,11 @@ export function App() {
     }
     setTime({kind: "paused", simtime: 0});
     scrollDownSidebar();
- }
-
-  function onClear() {
+  }
+  const onClear = useCallback(() => {
     setTrace(null);
     setTime({kind: "paused", simtime: 0});
-  }
+  }, [setTrace, setTime]);
 
   // raise input event, producing a new runtime configuration (or a runtime error)
   function onRaise(inputEvent: string, param: any) {
@@ -225,7 +224,6 @@ export function App() {
     scrollDownSidebar();
   }
 
-
   function onBack() {
     if (trace !== null) {
       setTime(() => {
@@ -244,7 +242,7 @@ export function App() {
     }
   }
 
-  function scrollDownSidebar() {
+  const scrollDownSidebar = useCallback(() => {
     if (refRightSideBar.current) {
       const el = refRightSideBar.current;
       // hack: we want to scroll to the new element, but we have to wait until it is rendered...
@@ -252,7 +250,7 @@ export function App() {
         el.scrollIntoView({block: "end", behavior: "smooth"});
       }, 50);
     }
-  }
+  }, []);
 
   useEffect(() => {
     console.log("Welcome to StateBuddy!");