diff --git a/playground/ty/src/Editor/Chrome.tsx b/playground/ty/src/Editor/Chrome.tsx
index 537eac11e1..c038715064 100644
--- a/playground/ty/src/Editor/Chrome.tsx
+++ b/playground/ty/src/Editor/Chrome.tsx
@@ -163,6 +163,13 @@ export default function Chrome({
     [workspace, files.index, onRemoveFile],
   );
 
+  const handleChange = useCallback(
+    (content: string) => {
+      onChangeFile(workspace, content);
+    },
+    [onChangeFile, workspace],
+  );
+
   const { defaultLayout, onLayoutChange } = useDefaultLayout({
     groupId: "editor-diagnostics",
     storage: localStorage,
@@ -221,7 +228,7 @@ export default function Chrome({
                     diagnostics={checkResult.diagnostics}
                     workspace={workspace}
                     onMount={handleEditorMount}
-                    onChange={(content) => onChangeFile(workspace, content)}
+                    onChange={handleChange}
                     onOpenFile={onSelectFile}
                     onVendoredFileChange={onSelectVendoredFile}
                     onBackToUserFile={handleBackToUserFile}
diff --git a/playground/ty/src/Playground.tsx b/playground/ty/src/Playground.tsx
index 61801d8e58..f315b8538f 100644
--- a/playground/ty/src/Playground.tsx
+++ b/playground/ty/src/Playground.tsx
@@ -58,7 +58,7 @@ export default function Playground() {
     }
   }, [files]);
 
-  const handleFileAdded = (workspace: Workspace, name: string) => {
+  const handleFileAdded = useCallback((workspace: Workspace, name: string) => {
     let handle = null;
 
     if (name === SETTINGS_FILE_NAME) {
@@ -68,69 +68,74 @@ export default function Playground() {
     }
 
     dispatchFiles({ type: "add", name, handle, content: "" });
-  };
+  }, []);
 
-  const handleFileChanged = (workspace: Workspace, content: string) => {
-    if (files.selected == null) {
-      return;
-    }
+  const handleFileChanged = useCallback(
+    (workspace: Workspace, content: string) => {
+      if (files.selected == null) {
+        return;
+      }
 
-    dispatchFiles({
-      type: "change",
-      id: files.selected,
-      content,
-    });
+      const handle = files.handles[files.selected];
 
-    const handle = files.handles[files.selected];
+      if (handle != null) {
+        updateFile(workspace, handle, content, setError);
+      } else if (fileName === SETTINGS_FILE_NAME) {
+        updateOptions(workspace, content, setError);
+      }
 
-    if (handle != null) {
-      updateFile(workspace, handle, content, setError);
-    } else if (fileName === SETTINGS_FILE_NAME) {
-      updateOptions(workspace, content, setError);
-    }
-  };
+      dispatchFiles({
+        type: "change",
+        id: files.selected,
+        content,
+      });
+    },
+    [fileName, files.handles, files.selected],
+  );
 
-  const handleFileRenamed = (
-    workspace: Workspace,
-    file: FileId,
-    newName: string,
-  ) => {
-    if (newName.startsWith("/")) {
-      setError("File names cannot start with '/'.");
-      return;
-    }
-    if (newName.startsWith("vendored:")) {
-      setError("File names cannot start with 'vendored:'.");
-      return;
-    }
+  const handleFileRenamed = useCallback(
+    (workspace: Workspace, file: FileId, newName: string) => {
+      if (newName.startsWith("/")) {
+        setError("File names cannot start with '/'.");
+        return;
+      }
+      if (newName.startsWith("vendored:")) {
+        setError("File names cannot start with 'vendored:'.");
+        return;
+      }
 
-    const handle = files.handles[file];
-    let newHandle: FileHandle | null = null;
-    if (handle == null) {
-      updateOptions(workspace, null, setError);
-    } else {
-      workspace.closeFile(handle);
-    }
+      const handle = files.handles[file];
+      let newHandle: FileHandle | null = null;
+      if (handle == null) {
+        updateOptions(workspace, null, setError);
+      } else {
+        workspace.closeFile(handle);
+      }
 
-    if (newName === SETTINGS_FILE_NAME) {
-      updateOptions(workspace, files.contents[file], setError);
-    } else {
-      newHandle = workspace.openFile(newName, files.contents[file]);
-    }
+      if (newName === SETTINGS_FILE_NAME) {
+        updateOptions(workspace, files.contents[file], setError);
+      } else {
+        newHandle = workspace.openFile(newName, files.contents[file]);
+      }
 
-    dispatchFiles({ type: "rename", id: file, to: newName, newHandle });
-  };
+      dispatchFiles({ type: "rename", id: file, to: newName, newHandle });
+    },
+    [files.contents, files.handles],
+  );
 
-  const handleFileRemoved = (workspace: Workspace, file: FileId) => {
-    const handle = files.handles[file];
-    if (handle == null) {
-      updateOptions(workspace, null, setError);
-    } else {
-      workspace.closeFile(handle);
-    }
+  const handleFileRemoved = useCallback(
+    (workspace: Workspace, file: FileId) => {
+      const handle = files.handles[file];
+      if (handle == null) {
+        updateOptions(workspace, null, setError);
+      } else {
+        workspace.closeFile(handle);
+      }
 
-    dispatchFiles({ type: "remove", id: file });
-  };
+      dispatchFiles({ type: "remove", id: file });
+    },
+    [files.handles],
+  );
 
   const handleFileSelected = useCallback((file: FileId) => {
     dispatchFiles({ type: "selectFile", id: file });