Performance - Avoid multiple rendering for WMS dates

WFP-VAM / prism-app

PRISM is an interactive map-based dashboard that simplifies the integration of geospatial data on hazards, along with information on socioeconomic vulnerability

MIT License

45 stars 33 forks source link

Performance - Avoid multiple rendering for WMS dates #885

Open JulienPathtech opened 1 year ago

JulienPathtech commented 1 year ago

Prevent unnecessary layer rendering.

The WMSLayers component is rendered twice when we change date (selectedDate of the WMSLayer for instance). One rendering is done with current date and an another one is triggered with a the new selectedDate.

How to reproduce :

Add rainfaill aggregate layer
Change date, either from calendar or from the timeline
The react WMSLayers component should render twice

Is there anything else you can add about the proposal? You might want to link to related issues here, if you haven't already.

I reproduced this with WMSLayers but that might be the case with other layer type

HarryMytilinaios commented 1 year ago

@ericboucher @JulienPathtech. Some thoughts on the performance optimization:

Does this rerendering is also caused in a production build? We should ensure that this is also caused in a production build locally. I am not really sure though if we can meausre the rerenders in a locally production build, because I am not sure that the developer tools and the Profiler are working in a production build.
The Layers are being created through a createElement React function dynamically, we have to consider maybe changing that to a switch case block returning the specific components, because I am not really sure that the createElement is causing rerenders every time it is initialized.
At last we may need to consider adding a memo wrapper function to the individual Layers components in general to trigger shallow equality between the props that we are passing, maybe preventing the rerenders.

JulienPathtech commented 1 year ago

I don't think there is a difference between dev and prodcution environnement regarding react rendering flow. Production build is just about mimifying/uglifying, removing source map to have a lightweigh build. So, you're right, profiler and other developer tools will not work on production build. But, by fixing this in dev build, there is a huge chance it will also improve production build. And at least we would have slightly improves developer environement. (cc @jbperidypathtech )
For me, the memo() with createElement seems not the root cause of this extra rerendering. Also, I have no certainties that this refacto will improve performance.
Maybe, let's try

ericboucher commented 5 months ago

Linked to #1040