Memoize Settings

frontend/src/components/ContentView.js

@@ -44,8 +44,6 @@ const ContentView = ({
     );
   }
 
-  console.log('ContentView content', content);
-
   return activeTab === 'source' ? (
     <Editor
       content={content}

frontend/src/components/FileTree.js

@@ -1,33 +1,27 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Tree } from '@geist-ui/core';
 import { File, Folder, Image } from '@geist-ui/icons';
 import { isImageFile } from '../utils/fileHelpers';
 
-const FileTree = ({ files, selectedFile, handleFileSelect }) => {
+const FileTree = ({ files, handleFileSelect }) => {
   if (files.length === 0) {
     return <div>No files to display</div>;
   }
 
-  const renderLabel = (node) => {
-    const path = node.extra;
-    return (
-      <span style={{ color: path === selectedFile ? '#0070f3' : 'inherit' }}>
-        {node.name}
-      </span>
-    );
-  };
-
-  const renderIcon = ({ type, name }) => {
-    if (type === 'directory') return <Folder />;
-    return isImageFile(name) ? <Image /> : <File />;
-  };
+  const renderIcon = useMemo(
+    () =>
+      ({ type, name }) => {
+        if (type === 'directory') return <Folder />;
+        return isImageFile(name) ? <Image /> : <File />;
+      },
+    []
+  );
 
   return (
     <Tree
       value={files}
       onClick={(filePath) => handleFileSelect(filePath)}
       renderIcon={renderIcon}
-      renderLabel={renderLabel}
     />
   );
 };