Change when new random shapes background is generated

components/ShapesBackground.tsx

@@ -1,29 +1,47 @@
 import { useWindowDimension } from "hooks/useWindowDimension";
+import { useRouter } from "next/router";
 import React, { CSSProperties, useEffect, useRef, useState } from "react";
 
 import { Image } from "./Image";
 
 import styles from "./ShapesBackground.module.css";
 
+const MOBILE_WIDTH = 768;
+
 interface Props {
   getConfig?: GetShapesConfig;
 }
 
 export function ShapesBackground({ getConfig }: Props) {
   const [config, setConfig] = useState<ShapesConfig>({});
+  const [prevWidth, setPrevWidth] = useState<number>(-1);
+  const [prevRoute, setPrevRoute] = useState<string>("");
   const { width, height } = useWindowDimension();
   const shapesContainerRef = useRef<HTMLDivElement>(null);
+  const router = useRouter();
 
   useEffect(() => {
-    const width = shapesContainerRef.current?.clientWidth;
+    const containerWidth = shapesContainerRef.current?.offsetWidth;
-    const height = shapesContainerRef.current?.clientHeight;
+    const containerHeight = shapesContainerRef.current?.offsetHeight;
 
-    if (width == null || height == null) {
+    if (
+      containerWidth == null ||
+      containerHeight == null ||
+      !(
+        router.pathname === "/" ||
+        router.pathname !== prevRoute ||
+        prevWidth < 0 ||
+        (prevWidth <= MOBILE_WIDTH && MOBILE_WIDTH < width) ||
+        (prevWidth > MOBILE_WIDTH && MOBILE_WIDTH >= width)
+      )
+    ) {
       return;
     }
 
-    setConfig(getConfig?.(width, height) ?? {});
+    setPrevWidth(width);
-  }, [getConfig, width, height]);
+    setPrevRoute(router.pathname);
+    setConfig(getConfig?.(containerWidth, containerHeight) ?? {});
+  }, [getConfig, width, height, prevWidth, prevRoute, router.pathname]);
 
   return (
     <div className={styles.shapesContainer} ref={shapesContainerRef}>
@@ -171,7 +189,7 @@ const shapesBySize = {
 
 // Used to generate random shapes in the margins
 export const defaultGetShapesConfig = ((pageWidth, pageHeight) => {
-  if (window.innerWidth <= 768) {
+  if (window.innerWidth <= MOBILE_WIDTH) {
     return mobileShapesConfig;
   }