Stop double rendering, add monitors to useEffect dependency array

Client/src/Pages/Incidents/IncidentTable/index.jsx

@@ -30,6 +30,9 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 
   useEffect(() => {
     const fetchPage = async () => {
+      if (!monitors || Object.keys(monitors).length === 0) {
+        return;
+      }
       try {
         let url = `/checks/${selectedMonitor}?sortOrder=desc&filter=${filter}&page=${paginationController.page}&rowsPerPage=${paginationController.rowsPerPage}`;
 
@@ -52,6 +55,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
   }, [
     authToken,
     user,
+    monitors,
     selectedMonitor,
     filter,
     paginationController.page,

Client/src/Pages/Incidents/index.jsx

@@ -47,6 +47,7 @@ const Incidents = () => {
 
   useEffect(() => {
     const fetchMonitors = async () => {
+      console.log("fetching monitors");
       setLoading(true);
       const res = await axiosInstance.get(
         `/monitors/user/${authState.user._id}?status=false&limit=1`,