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(
+    ({ currentTarget: { value } }) => {
       const newGenerates = Number(value);
 
       if (newGenerates >= 1 && newGenerates <= 1000) {
         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,11 +1,11 @@
 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>(
-  ({ className, ...props }, ref) => (
+const RawInput = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => (
   <input
     {...{ ref }}
     className={cn(
@@ -15,6 +15,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     spellCheck="false"
     {...props}
   />
-  )
-);
-Input.displayName = "Input";
+));
+RawInput.displayName = "RawInput";
+
+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);