I'm working on an application. The backend is written in Go, and the frontend is written in React. Currently the data coming from the backend is about 200 objects in an array. This gets posted to an endpoint, and then the frontend subscribes to a websocket. The websocket sends a single object at a time of either an updated object or a new object that is then upserted into the frontend array.
The frontend then filters the original array and creates two smaller arrays from different filters. When the websocket sends an object, it upserts the object in the first array and then filters out the smaller array. This happens approximately 20 times a minute.
Everything above is working fine because we don't have a lot of objects. This is expected to grow to approximately 10,000 objects and maintain roughly that size.
My question is, how can I best optimize this process? Will the user see the best performance if the entire array is stored in JS memory and filtered out upon request, or will this cause performance issues parsing such a large array? Should I create a separate endpoint/parameter so the backend does the filtering instead of the frontend?