perf: memoize relatively intensively computed values

This commit is contained in:
Lewis Crichton 2023-09-10 14:23:19 +01:00
parent 12509f8157
commit 1be6738715
No known key found for this signature in database
3 changed files with 16 additions and 12 deletions

View file

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

View file

@ -4,7 +4,7 @@
* SPDX-License-Identifier: GPL-3.0-or-later * 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 { interface Props {
label: string; label: string;
@ -27,12 +27,16 @@ export function SettingRangeComponent({ label, name, default: def, min, max, ste
themeSettings[name] = corrected; themeSettings[name] = corrected;
} }
const markers: number[] = []; const markers = useMemo(() => {
const markers: number[] = [];
// defaults taken from https://github.com/openstyles/stylus/wiki/Writing-UserCSS#default-value // defaults taken from https://github.com/openstyles/stylus/wiki/Writing-UserCSS#default-value
for (let i = (min ?? 0); i <= (max ?? 10); i += (step ?? 1)) { for (let i = (min ?? 0); i <= (max ?? 10); i += (step ?? 1)) {
markers.push(i); markers.push(i);
} }
return markers;
}, [min, max, step]);
return ( return (
<Forms.FormSection> <Forms.FormSection>

View file

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