Now the page hash

src/__tests__/pages/index.test.jsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import { ColorContext } from "utils/contexts/color";
@@ -25,6 +25,7 @@ const {
     throwIn: null,
     validateData: [],
     hashData: null,
+    hashConfig: null,
     mutateHash: vi.fn(),
     servicesData: [],
     bookmarksData: [],
@@ -59,9 +60,12 @@ const {
   const serverSideTranslations = vi.fn(async (language) => ({ _translations: language }));
   const logger = { error: vi.fn() };
 
-  const useSWR = vi.fn((key) => {
+  const useSWR = vi.fn((key, config) => {
     if (key === "/api/validate") return { data: state.validateData };
-    if (key === "/api/hash") return { data: state.hashData, mutate: state.mutateHash };
+    if (key === "/api/hash") {
+      state.hashConfig = config;
+      return { data: state.hashData, mutate: state.mutateHash };
+    }
     if (key === "/api/services") return { data: state.servicesData };
     if (key === "/api/bookmarks") return { data: state.bookmarksData };
     if (key === "/api/widgets") return { data: state.widgetsData };
@@ -172,6 +176,7 @@ describe("pages/index getStaticProps", () => {
     state.throwIn = null;
     state.validateData = [];
     state.hashData = null;
+    state.hashConfig = null;
     state.servicesData = [];
     state.bookmarksData = [];
     state.widgetsData = [];
@@ -351,6 +356,7 @@ describe("pages/index Index routing + SWR branches", () => {
     }
 
     await renderIndex({ initialSettings: { title: "Homepage", layout: {} }, settings: { layout: {} } });
+    act(() => state.hashConfig.onSuccess(state.hashData));
 
     await waitFor(() => {
       expect(fetchSpy).toHaveBeenCalledWith("/api/revalidate");
@@ -379,6 +385,7 @@ describe("pages/index Index routing + SWR branches", () => {
     localStorage.removeItem("hash");
 
     await renderIndex({ initialSettings: { title: "Homepage", layout: {} }, settings: { layout: {} } });
+    act(() => state.hashConfig.onSuccess(state.hashData));
 
     await waitFor(() => {
       expect(localStorage.getItem("hash")).toBe("first-hash");

src/pages/index.jsx

@@ -12,7 +12,7 @@ import dynamic from "next/dynamic";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import Script from "next/script";
-import { useContext, useEffect, useMemo, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { BiError } from "react-icons/bi";
 import useSWR, { SWRConfig } from "swr";
 import { ColorContext } from "utils/contexts/color";
@@ -102,17 +102,10 @@ function Index({ initialSettings, fallback }) {
   const [stale, setStale] = useState(false);
   const { data: errorsData } = useSWR("/api/validate");
   const { error: validateError } = errorsData || {};
-  const { data: hashData, mutate: mutateHash } = useSWR("/api/hash");
 
-  useEffect(() => {
-    if (windowFocused) {
-      mutateHash();
-    }
-  }, [windowFocused, mutateHash]);
+  const handleHashData = useCallback((hashData) => {
+    if (typeof window === "undefined") return;
 
-  useEffect(() => {
-    if (hashData) {
-      if (typeof window !== "undefined") {
     const previousHash = localStorage.getItem("hash");
 
     if (!previousHash) {
@@ -129,9 +122,15 @@ function Index({ initialSettings, fallback }) {
         }
       });
     }
+  }, []);
+
+  const { mutate: mutateHash } = useSWR("/api/hash", { onSuccess: handleHashData });
+
+  useEffect(() => {
+    if (windowFocused) {
+      mutateHash();
     }
-    }
-  }, [hashData]);
+  }, [windowFocused, mutateHash]);
 
   if (validateError) {
     return (