From f5dfba28724b36c843f6d77896a8da3a656039d5 Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Sun, 4 Feb 2024 21:13:56 +1100 Subject: [PATCH] perf: add memo to react components --- src/interface/SettingsPage.tsx | 3 ++- src/interface/components/BackgroundSelector.tsx | 8 +++++--- src/interface/components/Picker.tsx | 8 +++++--- src/interface/components/PickerSwatch.tsx | 3 ++- src/interface/components/Slider.tsx | 3 ++- src/interface/components/Switch.tsx | 7 +++++-- src/interface/components/TabbedContainer.tsx | 4 ++-- src/interface/components/ThemeSelector.tsx | 4 ++-- 8 files changed, 25 insertions(+), 15 deletions(-) diff --git a/src/interface/SettingsPage.tsx b/src/interface/SettingsPage.tsx index ee3f1f95..ff1c4709 100644 --- a/src/interface/SettingsPage.tsx +++ b/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; \ No newline at end of file +export default memo(SettingsPage); \ No newline at end of file diff --git a/src/interface/components/BackgroundSelector.tsx b/src/interface/components/BackgroundSelector.tsx index f325a78e..19c690f6 100644 --- a/src/interface/components/BackgroundSelector.tsx +++ b/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([]); const [selectedBackground, setSelectedBackground] = useState(localStorage.getItem('selectedBackground')); const [downloadedPresetIds, setDownloadedPresetIds] = useState([]); @@ -205,4 +205,6 @@ export default function BackgroundSelector({ selectedType, setSelectedType, isEd ); -} \ No newline at end of file +} + +export default memo(BackgroundSelector); \ No newline at end of file diff --git a/src/interface/components/Picker.tsx b/src/interface/components/Picker.tsx index 27563717..50ad7838 100644 --- a/src/interface/components/Picker.tsx +++ b/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() { ); -} \ No newline at end of file +} + +export default memo(Picker); \ No newline at end of file diff --git a/src/interface/components/PickerSwatch.tsx b/src/interface/components/PickerSwatch.tsx index 48eb9c03..74277e0c 100644 --- a/src/interface/components/PickerSwatch.tsx +++ b/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); diff --git a/src/interface/components/Slider.tsx b/src/interface/components/Slider.tsx index 0d063fe9..60ed8ac8 100644 --- a/src/interface/components/Slider.tsx +++ b/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 = ({ state, onChange }) => { ); }; -export default Slider; \ No newline at end of file +export default memo(Slider); \ No newline at end of file diff --git a/src/interface/components/Switch.tsx b/src/interface/components/Switch.tsx index ff3e7b19..a62007b8 100644 --- a/src/interface/components/Switch.tsx +++ b/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 -}; \ No newline at end of file +}; + +export default memo(Switch); \ No newline at end of file diff --git a/src/interface/components/TabbedContainer.tsx b/src/interface/components/TabbedContainer.tsx index 9b85ac55..d9e4f2dc 100644 --- a/src/interface/components/TabbedContainer.tsx +++ b/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 = ({ tabs }) => { ); }; -export default TabbedContainer; +export default memo(TabbedContainer); diff --git a/src/interface/components/ThemeSelector.tsx b/src/interface/components/ThemeSelector.tsx index b9fdc5a9..9f711bf6 100644 --- a/src/interface/components/ThemeSelector.tsx +++ b/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; \ No newline at end of file +export default memo(ThemeSelector); \ No newline at end of file