fix infinite fetching loop

package-lock.json

@@ -11,6 +11,7 @@
         "@next/bundle-analyzer": "10.0.7",
         "axios": "0.21.1",
         "date-fns": "2.18.0",
+        "fast-deep-equal": "^3.1.3",
         "js-cookie": "2.2.1",
         "lodash": "4.17.21",
         "next": "10.0.8",

package.json

@@ -65,6 +65,7 @@
     "@next/bundle-analyzer": "10.0.7",
     "axios": "0.21.1",
     "date-fns": "2.18.0",
+    "fast-deep-equal": "^3.1.3",
     "js-cookie": "2.2.1",
     "lodash": "4.17.21",
     "next": "10.0.8",

src/hooks/useFetchEvents.ts

@@ -1,4 +1,6 @@
+import { useRef } from "react";
 import useSWR from "swr";
+import isDeepEqual from "fast-deep-equal/react";
 import axios, { AxiosRequestConfig } from "axios";
 import Event from "@models/Event";
 import { getAuthHeader } from "@utils/auth";
@@ -34,7 +36,14 @@ const useFetchEvents = ({
   options = {},
 }: FetchArguments) => {
   const { url, config } = generateFetchParams(id, options);
-  const { data, error } = useSWR([url, config], fetcher, { initialData });
+
+  // Use ref, since config dependency is non-primitive => without this we have infinite fetch loop
+  const configRef = useRef(config);
+  if (!isDeepEqual(configRef.current, config)) {
+    configRef.current = config;
+  }
+
+  const { data, error } = useSWR([url, configRef.current], fetcher, { initialData });
   return {
     data: data?.results || data,
     error,

src/hooks/useFetchFeed.ts

@@ -1,4 +1,6 @@
+import { useRef } from "react";
 import useSWR from "swr";
+import isDeepEqual from "fast-deep-equal/react";
 import axios, { AxiosRequestConfig } from "axios";
 import Post from "@models/Feed";
 import { getAuthHeader } from "@utils/auth";
@@ -30,7 +32,14 @@ const useFetchFeed = ({
   options = {},
 }: FetchArguments) => {
   const { url, config } = generateFetchParams(id, options);
-  const { data, error } = useSWR([url, config], feedFetcher, { initialData });
+
+  // Use ref, since config dependency is non-primitive => without this we have infinite fetch loop
+  const configRef = useRef(config);
+  if (!isDeepEqual(configRef.current, config)) {
+    configRef.current = config;
+  }
+
+  const { data, error } = useSWR([url, configRef.current], feedFetcher, { initialData });
   return {
     data: data?.results || data,
     error,

src/hooks/useFetchJobAds.ts

@@ -1,5 +1,7 @@
-import axios, { AxiosRequestConfig } from "axios";
+import { useRef } from "react";
 import useSWR from "swr";
+import isDeepEqual from "fast-deep-equal/react";
+import axios, { AxiosRequestConfig } from "axios";
 import JobAd from "@models/JobAd";
 import { getAuthHeader } from "@utils/auth";
 import { URL, Options } from "@api/jobAdApi";
@@ -30,7 +32,14 @@ const useFetchJobAds = ({
   options = {},
 }: FetchArguments) => {
   const { url, config } = generateFetchParams(id, options);
-  const { data, error } = useSWR([url, config], jobAdFetcher, { initialData });
+
+  // Use ref, since config dependency is non-primitive => without this we have infinite fetch loop
+  const configRef = useRef(config);
+  if (!isDeepEqual(configRef.current, config)) {
+    configRef.current = config;
+  }
+
+  const { data, error } = useSWR([url, configRef.current], jobAdFetcher, { initialData });
   return {
     data: data?.results || data,
     error,