React, Google Maps, and WebSocket Performance Problem

For Turkish press 9.

On the Trendyol GO Admin Panel, we have a Live Map where we track all orders, couriers, buyers, and sellers with WebSocket in real-time. Let’s write a story to tell the problems we had during and after the writing of this map;

Given that we have 1000 couriers and 1000 orders at the time of “t”;

• We need to add 1000 buyer markers (pins) to the map.
• We need to add 1000 seller markers to the map.
• We need to add 1000 courier markers to the map.
• Each courier sends their current coordinates via WebSocket every 3 seconds, so we need to move approximately 300 courier markers to their current location on the map in 1 second.
• We add 2 polylines (linear lines) to demonstrate each order has linked to which buyer, which seller, and which courier, and thus, there will be 2000 polylines in total.
• We add an info window (pop-up) for each marker, and there will be 3000 info windows in total.
• Every time the order status changes (‘UnDeliveredAndReturned, ‘Shipped’, etc.), everything related to the order is updated on the map.

In other words, approximately 26000 processes are made on the map in 1 minute after the map is loaded. Considering that other functions upon which these processes are dependent also run, the number of processes can exceed hundreds of thousands. In these circumstances, performance was of critical importance to us.

When we first started the project, we could not find a document or a way to natively implement (include) Google Maps to (in) the React project at a quick search and not think that they would pose a problem in terms of performance because everyone suggested using the library instead of native implementation. We too tried using the library at first and tried out 2 different React Google Maps libraries, but we were not satisfied with both in terms of performance. These libraries were not providing all the features in the Google Maps API, and it was necessary to use a separate component for each marker and each polyline. Therefore, we had to create all markers or polylines by creating a loop in the template. When we wanted to update a specific one among the markers or polylines created with the loop, all markers and polylines were reloaded. This was not a case we wanted both visually and technically.

As a solution, we found the following way and implemented the Google Maps API as native; (We share the following example for guidance, but it’s up to you to modularize it according to your project :)

With this method, our performance problems were solved, and we cut back on unnecessary rendering costs and moved on for a long time without having a problem.

Then one day, we realized that WebSocket stopped and did not work after sometimes 20 minutes and sometimes 30 minutes following the first page load. At first glance, we thought a performance problem caused this because tens of thousands of processes were conducted on the map. After thorough research, we noticed that this was not related to performance, but it arose from the low Buffer Size and Time Limit in WebSocket Server. When we raised the Buffer Size and Time Limit, we solved all our problems :)

We will continue to share our experiences, and we hope our experiences will be of help to you, see you in the following article, goodbye :)