refactor: memoize input and textarea on export

app/generators/uuid/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
 import { range } from "fp-ts/NonEmptyArray";
 import * as t from "io-ts";
 
@@ -54,13 +54,16 @@ export default function Page() {
     }
   }, []);
 
-  const onGeneratesChange: InputProps["onChange"] = ({ currentTarget: { value } }) => {
+  const onGeneratesChange: NonNullable<InputProps["onChange"]> = useCallback(
-    const newGenerates = Number(value);
+    ({ currentTarget: { value } }) => {
+      const newGenerates = Number(value);
 
-    if (newGenerates >= 1 && newGenerates <= 1000) {
+      if (newGenerates >= 1 && newGenerates <= 1000) {
-      setGenerates(newGenerates);
+        setGenerates(newGenerates);
-    }
+      }
-  };
+    },
+    []
+  );
 
   const onGenerateClick = () => {
     const newUuids = range(1, generates).map(_ => uuid(uuidVersion, hyphens, uppercase));
@@ -121,18 +124,6 @@ export default function Page() {
     />
   );
 
-  const generatesInput = useMemo(
-    () => (
-      <Input
-        className="w-24 font-sans"
-        type="number"
-        value={generates}
-        onChange={onGeneratesChange}
-      />
-    ),
-    [generates]
-  );
-
   const uuidsCopyButton = <CopyButton text={uuidsString} />;
   const uuidsClearButton = <ClearButton onClick={clearUuids} iconOnly aria-label="clear uuids" />;
 
@@ -149,7 +140,12 @@ export default function Page() {
             Generate UUID(s)
           </Button>
           <span>×</span>
-          {generatesInput}
+          <Input
+            className="w-24 font-sans"
+            type="number"
+            value={generates}
+            onChange={onGeneratesChange}
+          />
         </div>
       </PageSection>
       <PageSection title="UUID(s)" control={uuidsControl}>

components/ui/input.tsx

@@ -1,20 +1,21 @@
 import * as React from "react";
+import equal from "react-fast-compare";
 
 import { cn } from "@/lib/style";
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const RawInput = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => (
-  ({ className, ...props }, ref) => (
+  <input
-    <input
+    {...{ ref }}
-      {...{ ref }}
+    className={cn(
-      className={cn(
+      "border-b-1 flex h-9 w-full rounded border border-b-muted-foreground bg-input px-3 py-2 font-mono outline-none placeholder:text-muted-foreground hover:bg-input-hover focus:border-b-2 focus:border-b-indicator focus:bg-input-focus focus:pb-[7px] disabled:cursor-not-allowed disabled:opacity-50",
-        "border-b-1 flex h-9 w-full rounded border border-b-muted-foreground bg-input px-3 py-2 font-mono outline-none placeholder:text-muted-foreground hover:bg-input-hover focus:border-b-2 focus:border-b-indicator focus:bg-input-focus focus:pb-[7px] disabled:cursor-not-allowed disabled:opacity-50",
+      className
-        className
+    )}
-      )}
+    spellCheck="false"
-      spellCheck="false"
+    {...props}
-      {...props}
+  />
-    />
+));
-  )
+RawInput.displayName = "RawInput";
-);
+
-Input.displayName = "Input";
+export const Input = React.memo(RawInput, equal);

components/ui/textarea.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
+import equal from "react-fast-compare";
 
 import { cn } from "@/lib/style";
 
 export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 
-export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+export const RawTextarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => (
     <textarea
       {...{ ref }}
@@ -17,4 +18,6 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     />
   )
 );
-Textarea.displayName = "Textarea";
+RawTextarea.displayName = "RawTextarea";
+
+export const Textarea = React.memo(RawTextarea, equal);