From 822a8db8f9df9807712ac741ad8828c4920fd012 Mon Sep 17 00:00:00 2001 From: rusconn Date: Sat, 24 Jun 2023 13:58:57 +0900 Subject: [PATCH] refactor: memoize buttons on export --- app/converters/json-yaml/page.tsx | 53 +++++++++------------------ app/converters/number-base/page.tsx | 8 ++-- app/encoders-decoders/base64/page.tsx | 41 +++++++-------------- app/encoders-decoders/html/page.tsx | 41 +++++++-------------- app/encoders-decoders/jwt/page.tsx | 18 ++++----- app/encoders-decoders/url/page.tsx | 41 +++++++-------------- app/formatters/json/page.tsx | 16 +++----- app/generators/hash/page.tsx | 37 ++++--------------- app/generators/uuid/page.tsx | 8 +--- components/buttons/clear.tsx | 7 +++- components/buttons/copy.tsx | 7 +++- components/buttons/file.tsx | 7 +++- components/buttons/paste.tsx | 7 +++- 13 files changed, 103 insertions(+), 188 deletions(-) diff --git a/app/converters/json-yaml/page.tsx b/app/converters/json-yaml/page.tsx index e026b85..0e58ccd 100644 --- a/app/converters/json-yaml/page.tsx +++ b/app/converters/json-yaml/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { useCallback, useMemo, useState } from "react"; +import { useCallback, useState } from "react"; import yaml from "js-yaml"; import { toolGroups } from "@/config/tools"; @@ -104,47 +104,30 @@ export default function Page() { /> ); - const jsonPasteButton = useMemo( - () => , - [setJsonReactively] - ); + const jsonPasteButton = ; + const yamlPasteButton = ; - const yamlPasteButton = useMemo( - () => , - [setYamlReactively] + const jsonFileButton = ( + ); - - const jsonFileButton = useMemo( - () => ( - - ), - [setJsonReactively] - ); - - const yamlFileButton = useMemo( - () => ( - - ), - [setYamlReactively] + const yamlFileButton = ( + ); const jsonCopyButton = ; const yamlCopyButton = ; - const clearButton = useMemo( - () => , - [clearBoth] - ); + const clearButton = ; const jsonControl = ( diff --git a/app/converters/number-base/page.tsx b/app/converters/number-base/page.tsx index 06c768d..05375b3 100644 --- a/app/converters/number-base/page.tsx +++ b/app/converters/number-base/page.tsx @@ -77,10 +77,10 @@ export default function Page() { [format] ); - const decPasteButton = useMemo(() => , [trySetDec]); - const hexPasteButton = useMemo(() => , [trySetHex]); - const octPasteButton = useMemo(() => , [trySetOct]); - const binPasteButton = useMemo(() => , [trySetBin]); + const decPasteButton = ; + const hexPasteButton = ; + const octPasteButton = ; + const binPasteButton = ; const decControl = ; const hexControl = ; diff --git a/app/encoders-decoders/base64/page.tsx b/app/encoders-decoders/base64/page.tsx index bfa8a0a..29db4fa 100644 --- a/app/encoders-decoders/base64/page.tsx +++ b/app/encoders-decoders/base64/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { useCallback, useMemo, useState } from "react"; +import { useCallback, useState } from "react"; import { decode, encode, isValid } from "js-base64"; import { toolGroups } from "@/config/tools"; @@ -48,36 +48,21 @@ export default function Page() { const onEncodedChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) => setEncodedReactively(value); - const decodedPasteButton = useMemo( - () => , - [setDecodedReactively] + const decodedPasteButton = ; + const encodedPasteButton = ; + + const decodedFileButton = ( + + ); + const encodedFileButton = ( + ); - const encodedPasteButton = useMemo( - () => , - [setEncodedReactively] - ); + const decodedCopyButton = ; + const encodedCopyButton = ; - const decodedFileButton = useMemo( - () => ( - - ), - [setDecodedReactively] - ); - - const encodedFileButton = useMemo( - () => ( - - ), - [setEncodedReactively] - ); - - const decodedCopyButton = useMemo(() => , [form.decoded]); - const encodedCopyButton = useMemo(() => , [form.encoded]); - - const clearButton = useMemo( - () => , - [clearBoth] + const clearButton = ( + ); const decodedControl = ( diff --git a/app/encoders-decoders/html/page.tsx b/app/encoders-decoders/html/page.tsx index cf4bc91..977709f 100644 --- a/app/encoders-decoders/html/page.tsx +++ b/app/encoders-decoders/html/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { useCallback, useMemo, useState } from "react"; +import { useCallback, useState } from "react"; import { escape, unescape } from "html-escaper"; import { toolGroups } from "@/config/tools"; @@ -46,36 +46,21 @@ export default function Page() { const onEncodedChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) => setEncodedReactively(value); - const decodedPasteButton = useMemo( - () => , - [setDecodedReactively] + const decodedPasteButton = ; + const encodedPasteButton = ; + + const decodedFileButton = ( + + ); + const encodedFileButton = ( + ); - const encodedPasteButton = useMemo( - () => , - [setEncodedReactively] - ); + const decodedCopyButton = ; + const encodedCopyButton = ; - const decodedFileButton = useMemo( - () => ( - - ), - [setDecodedReactively] - ); - - const encodedFileButton = useMemo( - () => ( - - ), - [setEncodedReactively] - ); - - const decodedCopyButton = useMemo(() => , [form.decoded]); - const encodedCopyButton = useMemo(() => , [form.encoded]); - - const clearButton = useMemo( - () => , - [clearBoth] + const clearButton = ( + ); const decodedControl = ( diff --git a/app/encoders-decoders/jwt/page.tsx b/app/encoders-decoders/jwt/page.tsx index f28d7e8..cd88d42 100644 --- a/app/encoders-decoders/jwt/page.tsx +++ b/app/encoders-decoders/jwt/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { useCallback, useMemo, useState } from "react"; +import { useCallback, useState } from "react"; import { toolGroups } from "@/config/tools"; import { decode } from "@/lib/jwt"; @@ -27,20 +27,16 @@ export default function Page() { const onJwtChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) => setJwt(value); - const jwtTokenPasteButton = useMemo(() => , [setJwt]); + const jwtTokenPasteButton = ; - const jwtTokenFileButton = useMemo( - () => , - [setJwt] + const jwtTokenFileButton = ( + ); - const jwtTokenClearButton = useMemo( - () => , - [clearJwt] - ); + const jwtTokenClearButton = ; - const heaederCopyButton = useMemo(() => , [header]); - const payloadCopyButton = useMemo(() => , [payload]); + const heaederCopyButton = ; + const payloadCopyButton = ; const jwtTokenControl = ( diff --git a/app/encoders-decoders/url/page.tsx b/app/encoders-decoders/url/page.tsx index 7bb545e..6fa8ca0 100644 --- a/app/encoders-decoders/url/page.tsx +++ b/app/encoders-decoders/url/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { useCallback, useMemo, useState } from "react"; +import { useCallback, useState } from "react"; import { toolGroups } from "@/config/tools"; import { safeDecodeURIComponent, safeEncodeURIComponent } from "@/lib/uri"; @@ -46,36 +46,21 @@ export default function Page() { const onEncodedChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) => setEncodedReactively(value); - const decodedPasteButton = useMemo( - () => , - [setDecodedReactively] + const decodedPasteButton = ; + const encodedPasteButton = ; + + const decodedFileButton = ( + + ); + const encodedFileButton = ( + ); - const encodedPasteButton = useMemo( - () => , - [setEncodedReactively] - ); + const decodedCopyButton = ; + const encodedCopyButton = ; - const decodedFileButton = useMemo( - () => ( - - ), - [setDecodedReactively] - ); - - const encodedFileButton = useMemo( - () => ( - - ), - [setEncodedReactively] - ); - - const decodedCopyButton = useMemo(() => , [form.decoded]); - const encodedCopyButton = useMemo(() => , [form.encoded]); - - const clearButton = useMemo( - () => , - [clearBoth] + const clearButton = ( + ); const decodedControl = ( diff --git a/app/formatters/json/page.tsx b/app/formatters/json/page.tsx index 7cdf047..dc0f510 100644 --- a/app/formatters/json/page.tsx +++ b/app/formatters/json/page.tsx @@ -67,21 +67,15 @@ export default function Page() { [indentation] ); - const inputPasteButton = useMemo(() => , []); + const inputPasteButton = ; - const inputFileButton = useMemo( - () => ( - - ), - [] + const inputFileButton = ( + ); - const inputClearButton = useMemo( - () => , - [clearInput] - ); + const inputClearButton = ; - const outputCopyButton = useMemo(() => , [output]); + const outputCopyButton = ; const inputControl = ; const outputControl = ; diff --git a/app/generators/hash/page.tsx b/app/generators/hash/page.tsx index 6ad3ed1..ce53fa3 100644 --- a/app/generators/hash/page.tsx +++ b/app/generators/hash/page.tsx @@ -56,39 +56,16 @@ export default function Page() { [uppercase] ); - const inputPasteButton = useMemo(() => , []); - - const inputFileButton = useMemo( - () => , - [] - ); - - const inputClearButton = useMemo( - () => , - [clearInput] - ); + const inputPasteButton = ; + const inputFileButton = ; + const inputClearButton = ; const inputControl = ; - const md5CopyButton = useMemo( - () => , - [md5] - ); - - const sha1CopyButton = useMemo( - () => , - [sha1] - ); - - const sha256CopyButton = useMemo( - () => , - [sha256] - ); - - const sha512CopyButton = useMemo( - () => , - [sha512] - ); + const md5CopyButton = ; + const sha1CopyButton = ; + const sha256CopyButton = ; + const sha512CopyButton = ; return ( diff --git a/app/generators/uuid/page.tsx b/app/generators/uuid/page.tsx index 1465bd1..c7be4f3 100644 --- a/app/generators/uuid/page.tsx +++ b/app/generators/uuid/page.tsx @@ -142,12 +142,8 @@ export default function Page() { [generates] ); - const uuidsCopyButton = useMemo(() => , [uuidsString]); - - const uuidsClearButton = useMemo( - () => , - [clearUuids] - ); + const uuidsCopyButton = ; + const uuidsClearButton = ; const uuidsControl = ; diff --git a/components/buttons/clear.tsx b/components/buttons/clear.tsx index 40930eb..9e24a20 100644 --- a/components/buttons/clear.tsx +++ b/components/buttons/clear.tsx @@ -1,9 +1,14 @@ +import { memo } from "react"; +import equal from "react-fast-compare"; + import { icons } from "@/components/icons"; import { BaseButton, BaseButtonProps } from "./base"; export type ClearButtonProps = Omit; -export function ClearButton({ iconOnly, ...props }: ClearButtonProps) { +function RawClearButton({ iconOnly, ...props }: ClearButtonProps) { return } {...{ iconOnly }} labelText="Clear" />; } + +export const ClearButton = memo(RawClearButton, equal); diff --git a/components/buttons/copy.tsx b/components/buttons/copy.tsx index 2f9c291..cd54289 100644 --- a/components/buttons/copy.tsx +++ b/components/buttons/copy.tsx @@ -1,4 +1,5 @@ -import { useCallback } from "react"; +import { memo, useCallback } from "react"; +import equal from "react-fast-compare"; import { icons } from "@/components/icons"; @@ -8,7 +9,7 @@ export type CopyButtonProps = Omit { navigator.clipboard.writeText(text).catch(e => { if (e instanceof Error) { @@ -27,3 +28,5 @@ export function CopyButton({ text, iconOnly, ...props }: CopyButtonProps) { /> ); } + +export const CopyButton = memo(RawCopyButton, equal); diff --git a/components/buttons/file.tsx b/components/buttons/file.tsx index a2b0a26..69ab468 100644 --- a/components/buttons/file.tsx +++ b/components/buttons/file.tsx @@ -1,4 +1,5 @@ -import { useCallback, useRef } from "react"; +import { memo, useCallback, useRef } from "react"; +import equal from "react-fast-compare"; import { icons } from "@/components/icons"; @@ -12,7 +13,7 @@ export type FileButtonProps = Pick & onFileRead: (text: string) => void; }; -export function FileButton({ +export function RawFileButton({ accept, iconOnly, maxFileSizeMb = 20, @@ -67,3 +68,5 @@ export function FileButton({ ); } + +export const FileButton = memo(RawFileButton, equal); diff --git a/components/buttons/paste.tsx b/components/buttons/paste.tsx index 1a2ac1c..ae39b58 100644 --- a/components/buttons/paste.tsx +++ b/components/buttons/paste.tsx @@ -1,4 +1,5 @@ -import { useCallback } from "react"; +import { memo, useCallback } from "react"; +import equal from "react-fast-compare"; import { icons } from "@/components/icons"; @@ -8,7 +9,7 @@ export type PasteButtonProps = Omit void; }; -export function PasteButton({ iconOnly, onClipboardRead, ...props }: PasteButtonProps) { +export function RawPasteButton({ iconOnly, onClipboardRead, ...props }: PasteButtonProps) { const onClick: BaseButtonProps["onClick"] = useCallback(() => { navigator.clipboard .readText() @@ -30,3 +31,5 @@ export function PasteButton({ iconOnly, onClipboardRead, ...props }: PasteButton /> ); } + +export const PasteButton = memo(RawPasteButton, equal);