perf: memoize relatively intensively computed values

src/components/ThemeSettings/components/SettingColorComponent.tsx

@@ -9,7 +9,7 @@ import "./colorStyles.css";
 import { classNameFactory } from "@api/Styles";
 import { LazyComponent } from "@utils/react";
 import { find, findByCodeLazy } from "@webpack";
-import { Forms, Popout, useState } from "@webpack/common";
+import { Forms, Popout, useMemo, useState } from "@webpack/common";
 
 interface ColorPickerProps {
     value: number | null;
@@ -69,14 +69,14 @@ export function SettingColorComponent({ label, name, themeSettings }: Props) {
         themeSettings[name] = corrected;
     }
 
-    const normalizedValue = TinyColor(value).toHex();
+    const normalizedValue = useMemo(() => parseInt(TinyColor(value).toHex(), 16), [value]);
 
     return (
         <Forms.FormSection>
             <Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
             <ColorPicker
                 key={name}
-                value={parseInt(normalizedValue, 16)}
+                value={normalizedValue}
                 onChange={handleChange}
             />
         </Forms.FormSection>

src/components/ThemeSettings/components/SettingRangeComponent.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { Forms, Slider, useState } from "@webpack/common";
+import { Forms, Slider, useMemo, useState } from "@webpack/common";
 
 interface Props {
     label: string;
@@ -27,6 +27,7 @@ export function SettingRangeComponent({ label, name, default: def, min, max, ste
         themeSettings[name] = corrected;
     }
 
+    const markers = useMemo(() => {
         const markers: number[] = [];
 
         // defaults taken from https://github.com/openstyles/stylus/wiki/Writing-UserCSS#default-value
@@ -34,6 +35,9 @@ export function SettingRangeComponent({ label, name, default: def, min, max, ste
             markers.push(i);
         }
 
+        return markers;
+    }, [min, max, step]);
+
     return (
         <Forms.FormSection>
             <Forms.FormTitle tag="h5">{label}</Forms.FormTitle>

src/components/ThemeSettings/components/SettingSelectComponent.tsx

@@ -5,7 +5,7 @@
  */
 
 import { identity } from "@utils/misc";
-import { ComponentTypes, Forms, Select, useState } from "@webpack/common";
+import { ComponentTypes, Forms, Select, useMemo, useState } from "@webpack/common";
 
 interface Props {
     label: string;
@@ -28,14 +28,14 @@ export function SettingSelectComponent({ label, name, options, default: def, the
         themeSettings[name] = value;
     }
 
-    const opts = options.map(option => ({
+    const opts = useMemo(() => options.map(option => ({
         disabled: false,
 
         key: option.name,
         value: option.value,
         default: def === option.name,
         label: option.label
-    } as ComponentTypes.SelectOption));
+    } satisfies ComponentTypes.SelectOption)), [options, def]);
 
     return (
         <Forms.FormSection>