perf: add memo to react components

src/interface/SettingsPage.tsx

@@ -5,6 +5,7 @@ import logoDark from './assets/betterseqta-light-full.png';
 import Shortcuts from './pages/Shortcuts';
 import Picker from './components/Picker';
 import Themes from './pages/Themes';
+import { memo } from 'react';
 
 interface SettingsPage {
   standalone: boolean;
@@ -38,4 +39,4 @@ const SettingsPage = ({ standalone }: SettingsPage) => {
   );
 };
 
-export default SettingsPage;
+export default memo(SettingsPage);

src/interface/components/BackgroundSelector.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect, useState } from "react";
+import { ChangeEvent, memo, useEffect, useState } from "react";
 import { downloadPresetBackground, openDB, readAllData, writeData } from "../hooks/BackgroundDataLoader";
 import presetBackgrounds from "../assets/presetBackgrounds";
 import "./BackgroundSelector.css";
@@ -21,7 +21,7 @@ interface BackgroundSelectorProps {
   isEditMode: boolean;
 }
 
-export default function BackgroundSelector({ selectedType, setSelectedType, isEditMode }: BackgroundSelectorProps) {
+function BackgroundSelector({ selectedType, setSelectedType, isEditMode }: BackgroundSelectorProps) {
   const [backgrounds, setBackgrounds] = useState<Background[]>([]);
   const [selectedBackground, setSelectedBackground] = useState<string | null>(localStorage.getItem('selectedBackground'));
   const [downloadedPresetIds, setDownloadedPresetIds] = useState<string[]>([]);
@@ -205,4 +205,6 @@ export default function BackgroundSelector({ selectedType, setSelectedType, isEd
     </div>
     </>
   );
-}
+}
+
+export default memo(BackgroundSelector);

src/interface/components/Picker.tsx

@@ -3,9 +3,9 @@ import { useSettingsContext } from '../SettingsContext';
 import { motion } from "framer-motion";
 
 import "./Picker.css";
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 
-export default function Picker() {
+function Picker() {
   const { settingsState, setSettingsState, showPicker, setShowPicker } = useSettingsContext();
 
   const defaultPresets = [
@@ -123,4 +123,6 @@ export default function Picker() {
       </div>
     </motion.div>
   );
-}
+}
+
+export default memo(Picker);

src/interface/components/PickerSwatch.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { useSettingsContext } from '../SettingsContext';
 
 const PickerSwatch = () => {
@@ -16,4 +17,4 @@ const PickerSwatch = () => {
   );
 };
 
-export default PickerSwatch;
+export default memo(PickerSwatch);

src/interface/components/Slider.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { useSettingsContext } from "../SettingsContext";
 import "./Slider.css";
 
@@ -24,4 +25,4 @@ const Slider: React.FC<SliderProps> = ({ state, onChange }) => {
   );
 };
 
-export default Slider;
+export default memo(Slider);

src/interface/components/Switch.tsx

@@ -1,8 +1,9 @@
 import { motion } from "framer-motion";
 import "./Switch.css";
 import type { SwitchProps } from "../types/SwitchProps";
+import { memo } from "react";
 
-export default function Switch(props: SwitchProps) {
+function Switch(props: SwitchProps) {
   const toggleSwitch = () => {
     const newIsOn = !props.state;
     props.onChange(newIsOn);
@@ -29,4 +30,6 @@ const spring = {
   type: "spring",
   stiffness: 700,
   damping: 30
-};
+};
+
+export default memo(Switch);

src/interface/components/TabbedContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, memo } from 'react';
 import { motion } from 'framer-motion';
 import type { TabbedContainerProps } from '../types/TabbedContainerProps';
 
@@ -111,4 +111,4 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
   );
 };
 
-export default TabbedContainer;
+export default memo(TabbedContainer);

src/interface/components/ThemeSelector.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import themesList from '../assets/themes';
 import { listThemes, disableTheme, downloadTheme, setTheme, deleteTheme } from "../hooks/ThemeManagment";
 
@@ -171,4 +171,4 @@ const ThemeSelector = ({ selectedType, setSelectedType, isEditMode }: ThemeSelec
   );
 };
 
-export default ThemeSelector;
+export default memo(ThemeSelector);