andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

components: memoize and streamline callbacks

Browse Source
This commit is contained in:
rektdeckard
2020-09-14 01:05:55 -04:00
parent 1d862e6587
commit b4db1df589
6 changed files with 30 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/ColorInput/ColorInput.tsx
View File

@@ -1,4 +1,4 @@
import React from "react";
import React, { useCallback } from "react";
import { useRecoilState, useRecoilValue } from "recoil";
import { iconColorAtom } from "../../state/atoms";
@@ -12,12 +12,15 @@ const ColorInput: React.FC<ColorInputProps> = () => {
const [color, setColor] = useRecoilState(iconColorAtom);
const isDark = useRecoilValue(isDarkThemeSelector);
const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const {
target: { value: color },
} = event;
if (color[0] === "#") setColor(color);
};
const handleColorChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
const {
target: { value: color },
} = event;
if (color[0] === "#") setColor(color);
},
[setColor]
);
const throttledColorChange = useThrottled(handleColorChange, 100, [
handleColorChange,