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(
-    () => <PasteButton onClipboardRead={setJsonReactively} />,
-    [setJsonReactively]
-  );
+  const jsonPasteButton = <PasteButton onClipboardRead={setJsonReactively} />;
+  const yamlPasteButton = <PasteButton onClipboardRead={setYamlReactively} />;
 
-  const yamlPasteButton = useMemo(
-    () => <PasteButton onClipboardRead={setYamlReactively} />,
-    [setYamlReactively]
+  const jsonFileButton = (
+    <FileButton
+      accept=".json"
+      onFileRead={setJsonReactively}
+      iconOnly
+      aria-label="load a json file"
+    />
   );
-
-  const jsonFileButton = useMemo(
-    () => (
-      <FileButton
-        accept=".json"
-        onFileRead={setJsonReactively}
-        iconOnly
-        aria-label="load a json file"
-      />
-    ),
-    [setJsonReactively]
-  );
-
-  const yamlFileButton = useMemo(
-    () => (
-      <FileButton
-        accept=".yml,.yaml"
-        onFileRead={setYamlReactively}
-        iconOnly
-        aria-label="load a yaml file"
-      />
-    ),
-    [setYamlReactively]
+  const yamlFileButton = (
+    <FileButton
+      accept=".yml,.yaml"
+      onFileRead={setYamlReactively}
+      iconOnly
+      aria-label="load a yaml file"
+    />
   );
 
   const jsonCopyButton = <CopyButton text={form.json} />;
   const yamlCopyButton = <CopyButton text={form.yaml} />;
 
-  const clearButton = useMemo(
-    () => <ClearButton onClick={clearBoth} iconOnly aria-label="clear json and yaml" />,
-    [clearBoth]
-  );
+  const clearButton = <ClearButton onClick={clearBoth} iconOnly aria-label="clear json and yaml" />;
 
   const jsonControl = (
     <ControlMenu list={[jsonPasteButton, jsonFileButton, jsonCopyButton, clearButton]} />
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(() => <PasteButton onClipboardRead={trySetDec} />, [trySetDec]);
-  const hexPasteButton = useMemo(() => <PasteButton onClipboardRead={trySetHex} />, [trySetHex]);
-  const octPasteButton = useMemo(() => <PasteButton onClipboardRead={trySetOct} />, [trySetOct]);
-  const binPasteButton = useMemo(() => <PasteButton onClipboardRead={trySetBin} />, [trySetBin]);
+  const decPasteButton = <PasteButton onClipboardRead={trySetDec} />;
+  const hexPasteButton = <PasteButton onClipboardRead={trySetHex} />;
+  const octPasteButton = <PasteButton onClipboardRead={trySetOct} />;
+  const binPasteButton = <PasteButton onClipboardRead={trySetBin} />;
 
   const decControl = <ControlMenu list={[decPasteButton]} />;
   const hexControl = <ControlMenu list={[hexPasteButton]} />;
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(
-    () => <PasteButton onClipboardRead={setDecodedReactively} />,
-    [setDecodedReactively]
+  const decodedPasteButton = <PasteButton onClipboardRead={setDecodedReactively} />;
+  const encodedPasteButton = <PasteButton onClipboardRead={setEncodedReactively} />;
+
+  const decodedFileButton = (
+    <FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
+  );
+  const encodedFileButton = (
+    <FileButton onFileRead={setEncodedReactively} iconOnly aria-label="load a encoded file" />
   );
 
-  const encodedPasteButton = useMemo(
-    () => <PasteButton onClipboardRead={setEncodedReactively} />,
-    [setEncodedReactively]
-  );
+  const decodedCopyButton = <CopyButton text={form.decoded} />;
+  const encodedCopyButton = <CopyButton text={form.encoded} />;
 
-  const decodedFileButton = useMemo(
-    () => (
-      <FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
-    ),
-    [setDecodedReactively]
-  );
-
-  const encodedFileButton = useMemo(
-    () => (
-      <FileButton onFileRead={setEncodedReactively} iconOnly aria-label="load a encoded file" />
-    ),
-    [setEncodedReactively]
-  );
-
-  const decodedCopyButton = useMemo(() => <CopyButton text={form.decoded} />, [form.decoded]);
-  const encodedCopyButton = useMemo(() => <CopyButton text={form.encoded} />, [form.encoded]);
-
-  const clearButton = useMemo(
-    () => <ClearButton onClick={clearBoth} iconOnly aria-label="clear decoded and encoded" />,
-    [clearBoth]
+  const clearButton = (
+    <ClearButton onClick={clearBoth} iconOnly aria-label="clear decoded and encoded" />
   );
 
   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(
-    () => <PasteButton onClipboardRead={setDecodedReactively} />,
-    [setDecodedReactively]
+  const decodedPasteButton = <PasteButton onClipboardRead={setDecodedReactively} />;
+  const encodedPasteButton = <PasteButton onClipboardRead={setEncodedReactively} />;
+
+  const decodedFileButton = (
+    <FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
+  );
+  const encodedFileButton = (
+    <FileButton onFileRead={setEncodedReactively} iconOnly aria-label="load a encoded file" />
   );
 
-  const encodedPasteButton = useMemo(
-    () => <PasteButton onClipboardRead={setEncodedReactively} />,
-    [setEncodedReactively]
-  );
+  const decodedCopyButton = <CopyButton text={form.decoded} />;
+  const encodedCopyButton = <CopyButton text={form.encoded} />;
 
-  const decodedFileButton = useMemo(
-    () => (
-      <FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
-    ),
-    [setDecodedReactively]
-  );
-
-  const encodedFileButton = useMemo(
-    () => (
-      <FileButton onFileRead={setEncodedReactively} iconOnly aria-label="load a encoded file" />
-    ),
-    [setEncodedReactively]
-  );
-
-  const decodedCopyButton = useMemo(() => <CopyButton text={form.decoded} />, [form.decoded]);
-  const encodedCopyButton = useMemo(() => <CopyButton text={form.encoded} />, [form.encoded]);
-
-  const clearButton = useMemo(
-    () => <ClearButton onClick={clearBoth} iconOnly aria-label="clear decoded and encoded" />,
-    [clearBoth]
+  const clearButton = (
+    <ClearButton onClick={clearBoth} iconOnly aria-label="clear decoded and encoded" />
   );
 
   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(() => <PasteButton onClipboardRead={setJwt} />, [setJwt]);
+  const jwtTokenPasteButton = <PasteButton onClipboardRead={setJwt} />;
 
-  const jwtTokenFileButton = useMemo(
-    () => <FileButton onFileRead={setJwt} iconOnly aria-label="load a token file" />,
-    [setJwt]
+  const jwtTokenFileButton = (
+    <FileButton onFileRead={setJwt} iconOnly aria-label="load a token file" />
   );
 
-  const jwtTokenClearButton = useMemo(
-    () => <ClearButton onClick={clearJwt} iconOnly aria-label="clear token" />,
-    [clearJwt]
-  );
+  const jwtTokenClearButton = <ClearButton onClick={clearJwt} iconOnly aria-label="clear token" />;
 
-  const heaederCopyButton = useMemo(() => <CopyButton text={header} />, [header]);
-  const payloadCopyButton = useMemo(() => <CopyButton text={payload} />, [payload]);
+  const heaederCopyButton = <CopyButton text={header} />;
+  const payloadCopyButton = <CopyButton text={payload} />;
 
   const jwtTokenControl = (
     <ControlMenu list={[jwtTokenPasteButton, jwtTokenFileButton, jwtTokenClearButton]} />
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(
-    () => <PasteButton onClipboardRead={setDecodedReactively} />,
-    [setDecodedReactively]
+  const decodedPasteButton = <PasteButton onClipboardRead={setDecodedReactively} />;
+  const encodedPasteButton = <PasteButton onClipboardRead={setEncodedReactively} />;
+
+  const decodedFileButton = (
+    <FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
+  );
+  const encodedFileButton = (
+    <FileButton onFileRead={setEncodedReactively} iconOnly aria-label="load a encoded file" />
   );
 
-  const encodedPasteButton = useMemo(
-    () => <PasteButton onClipboardRead={setEncodedReactively} />,
-    [setEncodedReactively]
-  );
+  const decodedCopyButton = <CopyButton text={form.decoded} />;
+  const encodedCopyButton = <CopyButton text={form.encoded} />;
 
-  const decodedFileButton = useMemo(
-    () => (
-      <FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
-    ),
-    [setDecodedReactively]
-  );
-
-  const encodedFileButton = useMemo(
-    () => (
-      <FileButton onFileRead={setEncodedReactively} iconOnly aria-label="load a encoded file" />
-    ),
-    [setEncodedReactively]
-  );
-
-  const decodedCopyButton = useMemo(() => <CopyButton text={form.decoded} />, [form.decoded]);
-  const encodedCopyButton = useMemo(() => <CopyButton text={form.encoded} />, [form.encoded]);
-
-  const clearButton = useMemo(
-    () => <ClearButton onClick={clearBoth} iconOnly aria-label="clear decoded and encoded" />,
-    [clearBoth]
+  const clearButton = (
+    <ClearButton onClick={clearBoth} iconOnly aria-label="clear decoded and encoded" />
   );
 
   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(() => <PasteButton onClipboardRead={setInput} />, []);
+  const inputPasteButton = <PasteButton onClipboardRead={setInput} />;
 
-  const inputFileButton = useMemo(
-    () => (
-      <FileButton accept=".json" onFileRead={setInput} iconOnly aria-label="load a json file" />
-    ),
-    []
+  const inputFileButton = (
+    <FileButton accept=".json" onFileRead={setInput} iconOnly aria-label="load a json file" />
   );
 
-  const inputClearButton = useMemo(
-    () => <ClearButton onClick={clearInput} iconOnly aria-label="clear json" />,
-    [clearInput]
-  );
+  const inputClearButton = <ClearButton onClick={clearInput} iconOnly aria-label="clear json" />;
 
-  const outputCopyButton = useMemo(() => <CopyButton text={output} />, [output]);
+  const outputCopyButton = <CopyButton text={output} />;
 
   const inputControl = <ControlMenu list={[inputPasteButton, inputFileButton, inputClearButton]} />;
   const outputControl = <ControlMenu list={[outputCopyButton]} />;
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(() => <PasteButton onClipboardRead={setInput} />, []);
-
-  const inputFileButton = useMemo(
-    () => <FileButton onFileRead={setInput} iconOnly aria-label="load a file" />,
-    []
-  );
-
-  const inputClearButton = useMemo(
-    () => <ClearButton onClick={clearInput} iconOnly aria-label="clear input" />,
-    [clearInput]
-  );
+  const inputPasteButton = <PasteButton onClipboardRead={setInput} />;
+  const inputFileButton = <FileButton onFileRead={setInput} iconOnly aria-label="load a file" />;
+  const inputClearButton = <ClearButton onClick={clearInput} iconOnly aria-label="clear input" />;
 
   const inputControl = <ControlMenu list={[inputPasteButton, inputFileButton, inputClearButton]} />;
 
-  const md5CopyButton = useMemo(
-    () => <CopyButton text={md5} iconOnly aria-label="copy generated md5" />,
-    [md5]
-  );
-
-  const sha1CopyButton = useMemo(
-    () => <CopyButton text={sha1} iconOnly aria-label="copy generated sha1" />,
-    [sha1]
-  );
-
-  const sha256CopyButton = useMemo(
-    () => <CopyButton text={sha256} iconOnly aria-label="copy generated sha256" />,
-    [sha256]
-  );
-
-  const sha512CopyButton = useMemo(
-    () => <CopyButton text={sha512} iconOnly aria-label="copy generated sha512" />,
-    [sha512]
-  );
+  const md5CopyButton = <CopyButton text={md5} iconOnly aria-label="copy generated md5" />;
+  const sha1CopyButton = <CopyButton text={sha1} iconOnly aria-label="copy generated sha1" />;
+  const sha256CopyButton = <CopyButton text={sha256} iconOnly aria-label="copy generated sha256" />;
+  const sha512CopyButton = <CopyButton text={sha512} iconOnly aria-label="copy generated sha512" />;
 
   return (
     <PageRootSection title={toolGroups.generators.tools.hash.longTitle}>
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(() => <CopyButton text={uuidsString} />, [uuidsString]);
-
-  const uuidsClearButton = useMemo(
-    () => <ClearButton onClick={clearUuids} iconOnly aria-label="clear uuids" />,
-    [clearUuids]
-  );
+  const uuidsCopyButton = <CopyButton text={uuidsString} />;
+  const uuidsClearButton = <ClearButton onClick={clearUuids} iconOnly aria-label="clear uuids" />;
 
   const uuidsControl = <ControlMenu list={[uuidsCopyButton, uuidsClearButton]} />;
 
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<BaseButtonProps, "icon" | "labelText">;
 
-export function ClearButton({ iconOnly, ...props }: ClearButtonProps) {
+function RawClearButton({ iconOnly, ...props }: ClearButtonProps) {
   return <BaseButton {...props} icon={<icons.X size={16} />} {...{ 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<BaseButtonProps, "icon" | "labelText" | "onCl
   text: string;
 };
 
-export function CopyButton({ text, iconOnly, ...props }: CopyButtonProps) {
+function RawCopyButton({ text, iconOnly, ...props }: CopyButtonProps) {
   const onClick: BaseButtonProps["onClick"] = useCallback(() => {
     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<InputProps, "accept"> &
     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<BaseButtonProps, "icon" | "labelText" | "onC
   onClipboardRead: (text: string) => 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);