perf: memoize relatively intensively computed values
This commit is contained in:
parent
12509f8157
commit
1be6738715
3 changed files with 16 additions and 12 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue