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 { 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>

View file

@ -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,12 +27,16 @@ export function SettingRangeComponent({ label, name, default: def, min, max, ste
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
for (let i = (min ?? 0); i <= (max ?? 10); i += (step ?? 1)) {
markers.push(i);
}
// defaults taken from https://github.com/openstyles/stylus/wiki/Writing-UserCSS#default-value
for (let i = (min ?? 0); i <= (max ?? 10); i += (step ?? 1)) {
markers.push(i);
}
return markers;
}, [min, max, step]);
return (
<Forms.FormSection>

View file

@ -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>