useInitializeMap called intensively

[absurd-turtle]

While working on the default layer issue I noticed that useInitiliazeMap is called 10 times when loading a map.
This needs to be investigated.

[markus2330]

Thank you for creating this issue!

@badnames do you know anything about it?

[badnames]

I have noticed similar patterns across the entire editor.
The base layerfor example is also called multiple times after a value it depends on has changed.

Although I could not find a specific cause, the main problem seems to be that these components depends on a lot of frequently changing state.
Anther other reason could be that we use many independent HTTP-requests for gathering data while initializing the map.
This is problematic because react re-renders each component that is affected by a state change.
Again, keep in mind that this is mainly speculation at this point!

However, if it turns out to be true we could try the following solutions:

• Reduce the amount of state BaseStage depends on (e.g. by spliting it up into sub-components that are rendered more quickly)
• Implement more consolidated REST APIs that return the entire map state in fewer requests.
• Consider using GraphQL or a similar library if the above solution becomes too much work in the long run.

[markus2330]

@Bushuo when refactoring/improving API calls, the most important imho/afaics would be that we can reduce the number of calls (especially sequence of calls that could be grouped together).

But overall the most important non-functional requirement of PermaplanT is that we improve performance/memory. With realistic maps it is already getting slow, e.g. zooming #1089, even though we have only one filled layer. @badnames works on this via #1056 and @danielsteinkogler will check if maybe some Konva elements are more performant than others. Suggestions/ideas on that topic are very welcomed.

[Bushuo]

@markus2330
What do you mean by sequence of calls? Calling the API concurrently, instead of sequentially, to reduce load times if the calls are independent from one another? I thing we are already doing this. This is by default with react query.

What could be an improvement over the current way of doing things is using the data API of react router.
I don't know why we chose not to use it, because that happenend before I joined the team last march but react-router supports a data api that defines all the data that should be available to a route on navigation.
https://reactrouter.com/en/main/route/loader

[Bushuo]

I think we should first figure out exactly why we have performance problems. Is it rerendering to often, etc. Then figure out a way to mitigate it.