From 9855a3473bfcc7cd84deff1dc44d9f15898a3408 Mon Sep 17 00:00:00 2001
From: Jorge Reyes <92123185+JorgeArt81@users.noreply.github.com>
Date: Fri, 28 Jun 2024 17:20:46 -0500
Subject: [PATCH 1/2] Update the itemsCoordinates state every time the length
 of itemsRoutes changes.

---
 src/reports/CombinedReportPage.jsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/reports/CombinedReportPage.jsx b/src/reports/CombinedReportPage.jsx
index 32ad5df0f8..e0fde2c832 100644
--- a/src/reports/CombinedReportPage.jsx
+++ b/src/reports/CombinedReportPage.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import {
   Table, TableBody, TableCell, TableHead, TableRow,
@@ -26,6 +26,13 @@ const CombinedReportPage = () => {
 
   const [items, setItems] = useState([]);
   const [loading, setLoading] = useState(false);
+  const [itemsCoordinates, setItemsCoordinates] = useState([]);
+
+  const itemsRoutes = items.flatMap((item) => item.route);
+
+  useEffect(() => {
+    setItemsCoordinates(itemsRoutes);
+  }, [itemsRoutes.length]);
 
   const createMarkers = () => items.flatMap((item) => item.events
     .map((event) => item.positions.find((p) => event.positionId === p.id))
@@ -68,7 +75,7 @@ const CombinedReportPage = () => {
               ))}
               <MapMarkers markers={createMarkers()} />
             </MapView>
-            <MapCamera coordinates={items.flatMap((item) => item.route)} />
+            <MapCamera coordinates={itemsCoordinates} />
           </div>
         )}
         <div className={classes.containerMain}>

From fd3a8a1439102b86e7097d328967bfa100bdc4c0 Mon Sep 17 00:00:00 2001
From: Jorge Reyes <92123185+JorgeArt81@users.noreply.github.com>
Date: Fri, 28 Jun 2024 22:44:21 -0500
Subject: [PATCH 2/2] reafactor: change useEffect by useMemo

---
 src/reports/CombinedReportPage.jsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/reports/CombinedReportPage.jsx b/src/reports/CombinedReportPage.jsx
index e0fde2c832..f591a7a170 100644
--- a/src/reports/CombinedReportPage.jsx
+++ b/src/reports/CombinedReportPage.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import {
   Table, TableBody, TableCell, TableHead, TableRow,
@@ -26,13 +26,8 @@ const CombinedReportPage = () => {
 
   const [items, setItems] = useState([]);
   const [loading, setLoading] = useState(false);
-  const [itemsCoordinates, setItemsCoordinates] = useState([]);
 
-  const itemsRoutes = items.flatMap((item) => item.route);
-
-  useEffect(() => {
-    setItemsCoordinates(itemsRoutes);
-  }, [itemsRoutes.length]);
+  const itemsCoordinates = useMemo(() => items.flatMap((item) => item.route), [items]);
 
   const createMarkers = () => items.flatMap((item) => item.events
     .map((event) => item.positions.find((p) => event.positionId === p.id))