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,25 +58,21 @@ export default function Page() {
   const onOctChange: InputProps["onChange"] = ({ currentTarget: { value } }) => trySetOct(value);
   const onBinChange: InputProps["onChange"] = ({ currentTarget: { value } }) => trySetBin(value);
 
-  const formatNumberConfig = useMemo(
-    () => (
-      <Configuration
-        icon={<icons.CaseSensitive size={24} />}
-        title="Format number"
-        control={
-          <LabeledSwitch
-            id="format-number-switch"
-            label={format ? "On" : "Off"}
-            checked={format}
-            onCheckedChange={setFormat}
-            aria-label="toggle whether to format numbers"
-          />
-        }
-      />
-    ),
-    [format]
+  const formatNumberConfig = (
+    <Configuration
+      icon={<icons.CaseSensitive size={24} />}
+      title="Format number"
+      control={
+        <LabeledSwitch
+          id="format-number-switch"
+          label={format ? "On" : "Off"}
+          checked={format}
+          onCheckedChange={setFormat}
+          aria-label="toggle whether to format numbers"
+        />
+      }
+    />
   );
-
   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,30 +41,27 @@ export default function Page() {
 
   const onJsonChange: EditorProps["onChange"] = value => setInput(value ?? "");
 
-  const indentationConfig = useMemo(
-    () => (
-      <Configuration
-        icon={<icons.Space size={24} className="-translate-y-1.5" />}
-        title="Indentation"
-        control={
-          <Select value={indentation} onValueChange={setIndentation}>
-            <SelectTrigger
-              className="w-28"
-              aria-label="toggle open/close state of indentation selection"
-            >
-              <SelectValue placeholder={indentation} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value={indentations.two}>2 spaces</SelectItem>
-              <SelectItem value={indentations.four}>4 spaces</SelectItem>
-              <SelectItem value={indentations.tab}>1 tab</SelectItem>
-              <SelectItem value={indentations.zero}>minified</SelectItem>
-            </SelectContent>
-          </Select>
-        }
-      />
-    ),
-    [indentation]
+  const indentationConfig = (
+    <Configuration
+      icon={<icons.Space size={24} className="-translate-y-1.5" />}
+      title="Indentation"
+      control={
+        <Select value={indentation} onValueChange={setIndentation}>
+          <SelectTrigger
+            className="w-28"
+            aria-label="toggle open/close state of indentation selection"
+          >
+            <SelectValue placeholder={indentation} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={indentations.two}>2 spaces</SelectItem>
+            <SelectItem value={indentations.four}>4 spaces</SelectItem>
+            <SelectItem value={indentations.tab}>1 tab</SelectItem>
+            <SelectItem value={indentations.zero}>minified</SelectItem>
+          </SelectContent>
+        </Select>
+      }
+    />
   );
 
   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,23 +37,20 @@ export default function Page() {
   const onInputChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) =>
     setInput(value);
 
-  const uppercaseConfig = useMemo(
-    () => (
-      <Configuration
-        icon={<icons.CaseSensitive size={24} />}
-        title="Uppercase"
-        control={
-          <LabeledSwitch
-            id="uppercase-switch"
-            label={uppercase ? "On" : "Off"}
-            checked={uppercase}
-            onCheckedChange={setUppercase}
-            aria-label="toggle whether to generate in uppercase"
-          />
-        }
-      />
-    ),
-    [uppercase]
+  const uppercaseConfig = (
+    <Configuration
+      icon={<icons.CaseSensitive size={24} />}
+      title="Uppercase"
+      control={
+        <LabeledSwitch
+          id="uppercase-switch"
+          label={uppercase ? "On" : "Off"}
+          checked={uppercase}
+          onCheckedChange={setUppercase}
+          aria-label="toggle whether to generate in 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,67 +67,58 @@ export default function Page() {
     setUuids([...uuids, ...newUuids]);
   };
 
-  const hyphensConfig = useMemo(
-    () => (
-      <Configuration
-        icon={<icons.Minus size={24} />}
-        title="Hyphens"
-        control={
-          <LabeledSwitch
-            id="hyphens-switch"
-            label={hyphens ? "On" : "Off"}
-            checked={hyphens}
-            onCheckedChange={setHyphens}
-            aria-label="toggle whether to add hyphens"
-          />
-        }
-      />
-    ),
-    [hyphens]
+  const hyphensConfig = (
+    <Configuration
+      icon={<icons.Minus size={24} />}
+      title="Hyphens"
+      control={
+        <LabeledSwitch
+          id="hyphens-switch"
+          label={hyphens ? "On" : "Off"}
+          checked={hyphens}
+          onCheckedChange={setHyphens}
+          aria-label="toggle whether to add hyphens"
+        />
+      }
+    />
   );
 
-  const uppercaseConfig = useMemo(
-    () => (
-      <Configuration
-        icon={<icons.CaseSensitive size={24} />}
-        title="Uppercase"
-        control={
-          <LabeledSwitch
-            id="uppercase-switch"
-            label={uppercase ? "On" : "Off"}
-            checked={uppercase}
-            onCheckedChange={setUppercase}
-            aria-label="toggle whether to generate in uppercase"
-          />
-        }
-      />
-    ),
-    [uppercase]
+  const uppercaseConfig = (
+    <Configuration
+      icon={<icons.CaseSensitive size={24} />}
+      title="Uppercase"
+      control={
+        <LabeledSwitch
+          id="uppercase-switch"
+          label={uppercase ? "On" : "Off"}
+          checked={uppercase}
+          onCheckedChange={setUppercase}
+          aria-label="toggle whether to generate in uppercase"
+        />
+      }
+    />
   );
 
-  const uuidVersionConfig = useMemo(
-    () => (
-      <Configuration
-        icon={<icons.Settings2 size={24} />}
-        title="UUID version"
-        description="Choose the version of UUID to generate"
-        control={
-          <Select value={uuidVersion} onValueChange={onUuidVersionChange}>
-            <SelectTrigger
-              className="w-28"
-              aria-label="toggle open/close state of uuid version selection"
-            >
-              <SelectValue placeholder={uuidVersion} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value={versions.v1}>1</SelectItem>
-              <SelectItem value={versions.v4}>4 (GUID)</SelectItem>
-            </SelectContent>
-          </Select>
-        }
-      />
-    ),
-    [uuidVersion]
+  const uuidVersionConfig = (
+    <Configuration
+      icon={<icons.Settings2 size={24} />}
+      title="UUID version"
+      description="Choose the version of UUID to generate"
+      control={
+        <Select value={uuidVersion} onValueChange={onUuidVersionChange}>
+          <SelectTrigger
+            className="w-28"
+            aria-label="toggle open/close state of uuid version selection"
+          >
+            <SelectValue placeholder={uuidVersion} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={versions.v1}>1</SelectItem>
+            <SelectItem value={versions.v4}>4 (GUID)</SelectItem>
+          </SelectContent>
+        </Select>
+      }
+    />
   );
 
   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,30 +19,27 @@ import { PageSection } from "@/components/page-section";
 export default function Page() {
   const { theme = "system", setTheme } = useTheme();
 
-  const appThemeConfig = useMemo(
-    () => (
-      <Configuration
-        icon={<icons.Paintbrush size={24} />}
-        title="App theme"
-        description="Select which app theme to display"
-        control={
-          <Select value={theme} onValueChange={setTheme}>
-            <SelectTrigger
-              className="w-28"
-              aria-label="toggle open/close state of app theme selection"
-            >
-              <SelectValue placeholder={theme} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="light">Light</SelectItem>
-              <SelectItem value="dark">Dark</SelectItem>
-              <SelectItem value="system">System</SelectItem>
-            </SelectContent>
-          </Select>
-        }
-      />
-    ),
-    [setTheme, theme]
+  const appThemeConfig = (
+    <Configuration
+      icon={<icons.Paintbrush size={24} />}
+      title="App theme"
+      description="Select which app theme to display"
+      control={
+        <Select value={theme} onValueChange={setTheme}>
+          <SelectTrigger
+            className="w-28"
+            aria-label="toggle open/close state of app theme selection"
+          >
+            <SelectValue placeholder={theme} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="light">Light</SelectItem>
+            <SelectItem value="dark">Dark</SelectItem>
+            <SelectItem value="system">System</SelectItem>
+          </SelectContent>
+        </Select>
+      }
+    />
   );
 
   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);