fixed infinite query loop

src/pages/Home/index.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Stack } from "react-bootstrap";
 import styles from "./index.module.scss";
 import axios from "axios";
@@ -7,15 +7,17 @@ import { BACKEND_URL } from "../../constants";
 export const Home = () => {
     const [events, updateEvents] = useState([]);
 
-    axios
-        .get(`${BACKEND_URL}/api/getEvents`)
-        .then((res) => {
-            if (res.status !== 200) throw new Error(`Request failed with code ${res.status}: ${res.statusText}`);
-            updateEvents(res.data);
-        })
-        .catch((e) => {
-            console.error(`Failed to fetch events. ${e}`);
-        });
+    useEffect(() => {
+        axios
+            .get(`${BACKEND_URL}/api/getEvents`)
+            .then((res) => {
+                if (res.status !== 200) throw new Error(`Request failed with code ${res.status}: ${res.statusText}`);
+                updateEvents(res.data);
+            })
+            .catch((e) => {
+                console.error(`Failed to fetch events. ${e}`);
+            });
+    }, []);
 
     return (
         <div className={styles.con}>