Компонент перерисовывает странно при изменении состояния

Question

Мой компонент с простым MapBox перерисовывается при каждом изменении состояния, которое не имеет ничего общего с компонентом?Есть идеи, как это предотвратить?

Этого не произойдет, если я не добавлю реквизит data ко второму аргументу useEffect, но мне нужно это сделать для повторного рендеринга при фактическом изменении данных ..

Компонент карты:

const getMap = () => {
    return new mapboxgl.Map({
        container: 'mapContainer',
        style: 'mapbox://styles/mapbox/light-v9',
        center: [7.32, 60.44],
        zoom: 6,
    })
};
const Map = (props) => {
  const { data } = props
  if (data['features'] != null) {
        useEffect(() => {
            const map = getMap();

            map.on('load', function () {

                map.addSource('malls', {
                    type: "geojson",
                    data: data,
                    cluster: true,
                    clusterMaxZoom: 14, 
                    clusterRadius: 50 
                });

            });
        }, [data]); //

  }
  return (
        <div style={style} id="mapContainer" />
  );
}

Answer 1

Крючки всегда следует называть внешними условиями, как указано в Правилах крючков .Вы можете переместить свой крюк на верхний уровень и переместить условное внутри него.

const Map = (props) => {
  const { data } = props
  useEffect(() => {
    if (data['features'] != null) {
      const map = getMap();
      map.on('load', function () {
        map.addSource('malls', {
          type: "geojson",
          data: data,
          cluster: true,
          clusterMaxZoom: 14, 
          clusterRadius: 50 
        });
      });
    }
  }, [data]);

  return (
    <div style={style} id="mapContainer" />
  );
}

Answer 2

Вместо того, чтобы писать его как функцию, вы должны использовать класс и реализовать функцию shouldComponentUpdate.