From f053bd40eba7d84766de777a156cb89179900d90 Mon Sep 17 00:00:00 2001
From: rusconn <rusconn3@gmail.com>
Date: Sun, 22 Sep 2024 19:09:10 +0900
Subject: [PATCH] perf: memoize some values

---
 app/formatters/json/page.tsx |  4 ++--
 app/generators/hash/page.tsx | 10 +++++-----
 app/generators/uuid/page.tsx |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/formatters/json/page.tsx b/app/formatters/json/page.tsx
index 3472ce5..e5706df 100644
--- a/app/formatters/json/page.tsx
+++ b/app/formatters/json/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 import { toolGroups } from "@/config/tools";
 import { safeJsonParse } from "@/lib/json";
@@ -25,7 +25,7 @@ export default function Page() {
   const [indentation, setIndentation] = useState(indentations.two);
   const [input, setInput] = useState('{\n"foo":"bar"\n}');
 
-  const parsed = safeJsonParse(input);
+  const parsed = useMemo(() => safeJsonParse(input), [input]);
   const output = parsed.map(x => JSON.stringify(x, null, indentation)).unwrapOr("");
 
   const clearInput = useCallback(() => setInput(""), []);
diff --git a/app/generators/hash/page.tsx b/app/generators/hash/page.tsx
index fdbbdac..65de50d 100644
--- a/app/generators/hash/page.tsx
+++ b/app/generators/hash/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import MD5 from "crypto-js/md5";
 import SHA1 from "crypto-js/sha1";
 import SHA256 from "crypto-js/sha256";
@@ -22,10 +22,10 @@ export default function Page() {
   const [uppercase, setUppercase] = useState(false);
   const [input, setInput] = useState("Hello there !");
 
-  const newMd5 = MD5(input).toString();
-  const newSha1 = SHA1(input).toString();
-  const newSha256 = SHA256(input).toString();
-  const newSha512 = SHA512(input).toString();
+  const newMd5 = useMemo(() => MD5(input).toString(), [input]);
+  const newSha1 = useMemo(() => SHA1(input).toString(), [input]);
+  const newSha256 = useMemo(() => SHA256(input).toString(), [input]);
+  const newSha512 = useMemo(() => SHA512(input).toString(), [input]);
 
   const md5 = uppercase ? newMd5.toUpperCase() : newMd5;
   const sha1 = uppercase ? newSha1.toUpperCase() : newSha1;
diff --git a/app/generators/uuid/page.tsx b/app/generators/uuid/page.tsx
index 0a05719..2608953 100644
--- a/app/generators/uuid/page.tsx
+++ b/app/generators/uuid/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 import { toolGroups } from "@/config/tools";
 import { uuid } from "@/lib/uuid";
@@ -38,7 +38,7 @@ export default function Page() {
   const [uuids, setUuids] = useState<string[]>([]);
   const ref = useAutoScroll<HTMLTextAreaElement>([uuids]);
 
-  const uuidsString = uuids.join("\n");
+  const uuidsString = useMemo(() => uuids.join("\n"), [uuids]);
 
   const clearUuids = useCallback(() => setUuids([]), []);