Apply suggestions from code reviewXe/key-bytes-in-flag

Co-authored-by: Ryan Cao <70191398+ryanccn@users.noreply.github.com>
Signed-off-by: Xe Iaso <me@xeiaso.net>

1 files changed, 4 insertions, 5 deletions

diff --git a/docs/src/components/RandomKey/index.tsx b/docs/src/components/RandomKey/index.tsx
index f1eb63a..e7ced3e 100644
--- a/docs/src/components/RandomKey/index.tsx
+++ b/docs/src/components/RandomKey/index.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useCallback } from "react";
 import Code from "@theme/CodeInline";
 import BrowserOnly from "@docusaurus/BrowserOnly";
 
@@ -20,17 +20,16 @@ export default function RandomKey() {
     <BrowserOnly fallback={<div>Loading...</div>}>
       {() => {
         const [key, setKey] = useState<String>(genRandomKey());
-        const [refresh, setRefresh] = useState<number>(0);
-        useEffect(() => {
+        const genRandomKeyCb = useCallback(() => {
           setKey(genRandomKey());
-        }, [refresh]);
+        });
         return (
           <span>
             <Code>{key}</Code>
             <span style={{ marginLeft: "0.25rem", marginRight: "0.25rem" }} />
             <button
               onClick={() => {
-                setRefresh((n) => n + 1);
+                genRandomKeyCb();
               }}
             >
               ♻️