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 renderIcon = useMemo(
-    const path = node.extra;
+    () =>
-    return (
+      ({ type, name }) => {
-      <span style={{ color: path === selectedFile ? '#0070f3' : 'inherit' }}>
+        if (type === 'directory') return <Folder />;
-        {node.name}
+        return isImageFile(name) ? <Image /> : <File />;
-      </span>
+      },
-    );
+    []
-  };
+  );
-
-  const renderIcon = ({ type, name }) => {
-    if (type === 'directory') return <Folder />;
-    return isImageFile(name) ? <Image /> : <File />;
-  };
 
   return (
     <Tree
       value={files}
       onClick={(filePath) => handleFileSelect(filePath)}
       renderIcon={renderIcon}
-      renderLabel={renderLabel}
     />
   );
 };

frontend/src/contexts/SettingsContext.js

@@ -1,12 +1,16 @@
-import React, { createContext, useState, useContext, useEffect } from 'react';
+import React, {
+  createContext,
+  useState,
+  useContext,
+  useEffect,
+  useMemo,
+} from 'react';
 import { fetchUserSettings, saveUserSettings } from '../services/api';
 import { DEFAULT_SETTINGS } from '../utils/constants';
 
 const SettingsContext = createContext();
 
-export const useSettings = () => {
+export const useSettings = () => useContext(SettingsContext);
-  return useContext(SettingsContext);
-};
 
 export const SettingsProvider = ({ children }) => {
   const [settings, setSettings] = useState(DEFAULT_SETTINGS);
@@ -15,7 +19,7 @@ export const SettingsProvider = ({ children }) => {
   useEffect(() => {
     const loadSettings = async () => {
       try {
-        const userSettings = await fetchUserSettings(1); // Assuming user ID 1 for now
+        const userSettings = await fetchUserSettings(1);
         setSettings(userSettings.settings);
       } catch (error) {
         console.error('Failed to load user settings:', error);
@@ -30,7 +34,7 @@ export const SettingsProvider = ({ children }) => {
   const updateSettings = async (newSettings) => {
     try {
       await saveUserSettings({
-        userId: 1, // Assuming user ID 1 for now
+        userId: 1,
         settings: newSettings,
       });
       setSettings(newSettings);
@@ -47,10 +51,18 @@ export const SettingsProvider = ({ children }) => {
     }));
   };
 
+  const contextValue = useMemo(
+    () => ({
+      settings,
+      updateSettings,
+      updateTheme,
+      loading,
+    }),
+    [settings, loading]
+  );
+
   return (
-    <SettingsContext.Provider
+    <SettingsContext.Provider value={contextValue}>
-      value={{ settings, updateSettings, updateTheme, loading }}
-    >
       {children}
     </SettingsContext.Provider>
   );