From e6d30c291beab09514a994b56c645ff57406fff7 Mon Sep 17 00:00:00 2001
From: Xevion <ryanchwalters@gmail.com>
Date: Fri, 25 Nov 2022 00:16:38 -0600
Subject: [PATCH] Add memoization to useBackground

---
 src/useBackground.tsx | 44 ++++++++++++++++++++++---------------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/useBackground.tsx b/src/useBackground.tsx
index 216a80f..c6594a9 100644
--- a/src/useBackground.tsx
+++ b/src/useBackground.tsx
@@ -47,27 +47,29 @@ const useBackground = ({
     setBackground(generateBackground());
   };
 
-  const svgWidth = Math.ceil((width ?? 1920) * ratio);
-  const svgHeight = Math.ceil((height ?? 1080) * ratio);
-  const noise = (
-    <svg
-      viewBox={`0 0 ${svgWidth} ${svgHeight}`}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <filter id="noiseFilter">
-        <feTurbulence
-          type="fractalNoise"
-          baseFrequency="2.1"
-          numOctaves="2"
-          seed={chance.natural()}
-          stitchTiles="stitch"
-        />
-      </filter>
-      <g opacity={0.9}>
-        <rect width="100%" height="100%" filter="url(#noiseFilter)" />
-      </g>
-    </svg>
-  );
+  const noise = useMemo(() => {
+    const svgWidth = Math.ceil((width ?? 1920) * ratio);
+    const svgHeight = Math.ceil((height ?? 1080) * ratio);
+    return (
+      <svg
+        viewBox={`0 0 ${svgWidth} ${svgHeight}`}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <filter id="noiseFilter">
+          <feTurbulence
+            type="fractalNoise"
+            baseFrequency="2.1"
+            numOctaves="2"
+            seed={chance.natural()}
+            stitchTiles="stitch"
+          />
+        </filter>
+        <g opacity={0.9}>
+          <rect width="100%" height="100%" filter="url(#noiseFilter)" />
+        </g>
+      </svg>
+    );
+  }, [width, height, ratio]);
 
   return {
     regenerate,