yext / search-ui-react / 21918716563 / 1

85%

main: 85%

push

github

fix: stop mapbox pins from flickering (#628)

Fixes a bug in the MapboxMap component where all Mapbox pins are removed and re-created when any pin is clicked. This bug was introduced when `selectedResult` was added to the dependency array of the effect hook that runs when **all** results change (i.e. a search is made) - by design, this hook destroys all current pins and makes new ones so it should not be re-run when only `selectedResult` changes.

This change:
* Extracts marker creation into it's own helper function, `createMarker`
* Adds an effect hook to update pins rendered with `renderPin` instead of `PinComponent` when they are selected. `PinComponent` already has an effect hook that handles selection, but `renderPin` does not.
* Adds comments to each MapboxMap effect hook to give context for what they do (helpful for me, personally)

[J=WAT-5390](https://yext.atlassian.net/browse/WAT-5390)
---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

1011 of 1411 branches covered (71.65%)

Branch coverage included in aggregate %.

2270 of 2463 relevant lines covered (92.16%)

147.45 hits per line