Is rerendering all layers efficient in react or is there a better way?

[kamrankhanwastaken]

I am using deck.gl with react-map-gl to allow users to select cities from a list and be able to view boundaries of those cities. I keep track of the state of my city related form data using formik. I am new to deck.gl but my main drive to use it was to ensure I can be as performant as possible given how big the data and visualizations can become. I have been reading up the docs and also looking at both the issues and discussions tab here but I am still a little lost on whether my approach is correct or if I'm actually doing this all wrong.

This is what my Map component looks like:

import React from "react";
import DeckGL from "@deck.gl/react";
import { StaticMap } from "react-map-gl";
import { GeoJsonLayer } from "@deck.gl/layers";
import { useFormikContext } from "formik";

const Map = () => {
  const { values } = useFormikContext();
  const [layers, setLayers] = React.useState([]);

  React.useEffect(() => {
    setLayers([]);
    createLayers();
  }, [values]);

  const createLayers = async () => {
    for (let i = 0; i < values.locations.length; i++) {
      const name = values.locations[i];
      const polygon = await getPolygon(name, i); // a custom function that retrieves the geospan data
      setLayers((layers) => {
        return [
          ...layers,
          new GeoJsonLayer({
            id: name,
            data: polygon,
            pickable: true,
            stroked: true,
            filled: true,
            extruded: false,
            lineWidthMinPixels: 1,
            getLineColor: [150, 150, 150, 255],
            lineJointRounded: true,
            getFillColor: [...polygon.properties.fill, 100],
          }),
        ];
      });
    }
  };
  return (
    <DeckGL
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
      layers={layers}
    >
      <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
    </DeckGL>
  );
};

This works fine, however, it re-renders all layers on a change.

Initially what made the most intuitive sense was to hide/show layers based on state change and I came across the visible attribute one can set on a layer, however, after much poking I realized that the visible attribute will not re-render a layer once it has been instantiated so that was a no-go.

Can anyone help me understand and/or nudge me about what I might be doing wrong/right here? Greatly appreciated.

[Clebal]

Hi @kamrankhanwastaken! It re-renders all layers on every change, because you're removing all layers in every change. I would recommend you to have only one GeoJsonLayer and you pass it a FeatureCollection GeoJSON with all the city boundaries that you want to choose. The getFillColor should be updated to make it a function to customise the fill color for each polygon.

const Map = () => {
  const { values } = useFormikContext();
  const [layers, setLayers] = React.useState([]);

  const loadLayer = () => {
    Promise.all(
        values.locations.map((location, idx) => getPolygon(location.name, idx))
    ).then(features => {
        setLayers([
          new GeoJsonLayer({
            id: 'city-boundaries',
            data: { type: 'FeatureCollection', features },
            pickable: true,
            stroked: true,
            filled: true,
            extruded: false,
            lineWidthMinPixels: 1,
            getLineColor: [150, 150, 150, 255],
            lineJointRounded: true,
            getFillColor: (d) => [...d.properties.fill, 100],
          })
        ];
    });
  }

  React.useEffect(() => {
    loadLayer()
  }, [values]);

  return (
    <DeckGL
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
      layers={layers}
    >
      <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
    </DeckGL>
  );
};

I haven't tested this code, but it should work. deck.gl won't repeat city-boundaries layer for every change, it will detect the properties that changed and redraw the layer with these new properties (like visible or data). If you want to update properties that are function, you have to take a look to updateTriggers.

Hope it helps!

[kamrankhanwastaken]

Thank you Clebel! I did test the code and it does exactly that.

My following question is just regarding performance. Is this definitely better than say recreating all the layers? The only way I'm able to tell right now whether I'm in the wrong if when my browser crashes.

Thank you again!

[Clebal]

When deck.gl detects a layer with the same id, it detects the sallow changes that have been done. You can check the performance optimization guide right here. What do you mean with that your "browser crashes"? Are your browser crashing using that code?

[kamrankhanwastaken]

No it's not but it's definitely hard to track or know how performance degrades/improves with certain decisions that I'm making using deck.gl.

Thank you for the guide!