thanks for reading. I’m working with a React/Leaflet map and noticing the map container / elements re-render any time I show or close a modal. I’ve created a sandbox to demonstrate the problem but this occurs in other places throughout my app if additional examples would help.
https://codesandbox.io/s/elegant-rain-01f9l?file=/src/App.js
From reading alternative SO posts, such as this very similar one, I recognize this is likely caused by my hooks (ex. handleShow/setShow) which force the entire component to re-render. The unintended behavior is noticed as follows:
If you drag the map so that the current location is out of view and open a modal, we force the re-load of and . This is evident because the map re-pans to the current location, and a new ‘search icon’ appears in the top right on the map.
Steps to replicate:
*If you notice an issue in sandbox related to react-bootstrap/Modal, just update the dependency to latest (refresh icon) – this is a weird sandbox issue but unrelated to my question.
- Drag map so that current location is out of view
- Click menu icon (top right) > Add Location
- When modal appears, notice map re-centers to current location and another search icon appears.