Update state without re-rendering ArcGIS map

Question

I am using React and ArcGIS to build an interactive map that will allow a User to:

1. Update the data layers displayed (suburbs, local government zones, etc) on the map
2. Updated the viewport (zoom and centre) of the map

The issue I am having is with the viewport, specifically 'zoom' and 'centre'. If, for example, somebody zooms in and then updates the data layers, it will revert back to the initial state viewport settings.

For reference, this is an example of a React interactive that I'm trying to achieve: https://www.fremantleports.com.au/the-port/port-map. As you can see, it allows you to update the data layers displayed (Buildings, Berths, etc...) without reverting back to the original zoom settings.

To achieve the above result, I have tried two methods:

1. useState and pass down the 'active layers' from the 'Sidebar Component' to the 'Map Component'. The problem is that it will revert back to the initial state viewport settings every time a user changes the data layers displayed.
2. useContext (and also with react-tracked) and ArcGIS watchUtils functions to and keep track of the activeLayers, zoom, and centre using global state. However, the problem was that the map re-rendered every time the user changed the zoom level.

Aim

https://www.fremantleports.com.au/the-port/port-map

Question

Which of the above approach is preferable, and how should I use that approach to achieve the desired goal?

Answer 1

When the user performs an action that will change the map, the map must re-render. I would say you should use useState to handle the state of the data layers and zoom level.

However, make sure you hold two separate state value, one for layers and one for the zoom level. Then, when you are rendering the map component, pass both of the states to the map component so it will render with the previous/new zoom level and layers. If the layer changed and the zoom level didn't, the previous level will be passed to map component and it won't initialize it.

Then, you can also use useMemo (Documentation) to save some unwanted renders (prevent re-render when value hasn't changed).