refactor: memoize configuration on export

app/converters/number-base/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 * as baselib from "@/lib/base";
@@ -58,8 +58,7 @@ export default function Page() {
   const onOctChange: InputProps["onChange"] = ({ currentTarget: { value } }) => trySetOct(value);
   const onBinChange: InputProps["onChange"] = ({ currentTarget: { value } }) => trySetBin(value);
 
-  const formatNumberConfig = useMemo(
-    () => (
+  const formatNumberConfig = (
     <Configuration
       icon={<icons.CaseSensitive size={24} />}
       title="Format number"
@@ -73,10 +72,7 @@ export default function Page() {
         />
       }
     />
-    ),
-    [format]
   );
-
   const decPasteButton = <PasteButton onClipboardRead={trySetDec} />;
   const hexPasteButton = <PasteButton onClipboardRead={trySetHex} />;
   const octPasteButton = <PasteButton onClipboardRead={trySetOct} />;

app/formatters/json/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 { safeJsonParse } from "@/lib/json";
@@ -41,8 +41,7 @@ export default function Page() {
 
   const onJsonChange: EditorProps["onChange"] = value => setInput(value ?? "");
 
-  const indentationConfig = useMemo(
-    () => (
+  const indentationConfig = (
     <Configuration
       icon={<icons.Space size={24} className="-translate-y-1.5" />}
       title="Indentation"
@@ -63,8 +62,6 @@ export default function Page() {
         </Select>
       }
     />
-    ),
-    [indentation]
   );
 
   const inputPasteButton = <PasteButton onClipboardRead={setInput} />;

app/generators/hash/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
 import createHash from "create-hash";
 
 import { toolGroups } from "@/config/tools";
@@ -37,8 +37,7 @@ export default function Page() {
   const onInputChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) =>
     setInput(value);
 
-  const uppercaseConfig = useMemo(
-    () => (
+  const uppercaseConfig = (
     <Configuration
       icon={<icons.CaseSensitive size={24} />}
       title="Uppercase"
@@ -52,8 +51,6 @@ export default function Page() {
         />
       }
     />
-    ),
-    [uppercase]
   );
 
   const inputPasteButton = <PasteButton onClipboardRead={setInput} />;

app/generators/uuid/page.tsx

@@ -48,11 +48,11 @@ export default function Page() {
 
   const clearUuids = useCallback(() => setUuids([]), []);
 
-  const onUuidVersionChange: SelectProps["onValueChange"] = value => {
+  const onUuidVersionChange: NonNullable<SelectProps["onValueChange"]> = useCallback(value => {
     if (uuidVersions.is(value)) {
       setUuidVersion(value);
     }
-  };
+  }, []);
 
   const onGeneratesChange: InputProps["onChange"] = ({ currentTarget: { value } }) => {
     const newGenerates = Number(value);
@@ -67,8 +67,7 @@ export default function Page() {
     setUuids([...uuids, ...newUuids]);
   };
 
-  const hyphensConfig = useMemo(
-    () => (
+  const hyphensConfig = (
     <Configuration
       icon={<icons.Minus size={24} />}
       title="Hyphens"
@@ -82,12 +81,9 @@ export default function Page() {
         />
       }
     />
-    ),
-    [hyphens]
   );
 
-  const uppercaseConfig = useMemo(
-    () => (
+  const uppercaseConfig = (
     <Configuration
       icon={<icons.CaseSensitive size={24} />}
       title="Uppercase"
@@ -101,12 +97,9 @@ export default function Page() {
         />
       }
     />
-    ),
-    [uppercase]
   );
 
-  const uuidVersionConfig = useMemo(
-    () => (
+  const uuidVersionConfig = (
     <Configuration
       icon={<icons.Settings2 size={24} />}
       title="UUID version"
@@ -126,8 +119,6 @@ export default function Page() {
         </Select>
       }
     />
-    ),
-    [uuidVersion]
   );
 
   const generatesInput = useMemo(

app/settings/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useMemo } from "react";
 import { useTheme } from "next-themes";
 
 import { singleTools } from "@/config/tools";
@@ -20,8 +19,7 @@ import { PageSection } from "@/components/page-section";
 export default function Page() {
   const { theme = "system", setTheme } = useTheme();
 
-  const appThemeConfig = useMemo(
-    () => (
+  const appThemeConfig = (
     <Configuration
       icon={<icons.Paintbrush size={24} />}
       title="App theme"
@@ -42,8 +40,6 @@ export default function Page() {
         </Select>
       }
     />
-    ),
-    [setTheme, theme]
   );
 
   return (

components/configuration.tsx

@@ -1,3 +1,6 @@
+import { memo } from "react";
+import equal from "react-fast-compare";
+
 type Props = {
   icon: React.ReactNode;
   title: string;
@@ -5,7 +8,7 @@ type Props = {
   control: React.ReactNode;
 };
 
-export function Configuration({ icon, title, description, control }: Props) {
+function RawConfiguration({ icon, title, description, control }: Props) {
   return (
     <div className="flex h-16 items-center gap-6 rounded border bg-configuration px-4">
       {icon}
@@ -21,3 +24,5 @@ export function Configuration({ icon, title, description, control }: Props) {
     </div>
   );
 }
+
+export const Configuration = memo(RawConfiguration, equal);