updateTriggers not working in React

[galenwinsor]

I'm having a similar issue to #2123, but in React, where I would expect the re-render triggered by a state change would "re-run" the render function as mentioned in that thread. The following code uses selectedData to determine the color of each point in the scatter plot layer. onClick and onHover both update that state, but getColors is only called initially. This behavior seems to be a bit flaky, since it will sometimes work. Do the dependencies of updateTriggers have to be props, not state variables within the current component? If the diffing uses shallow comparison, I can imagine that could be the issue.

(Map is a custom component that delegates props to DeckGL)

      <Map
        initialViewState={INITIAL_MAP_STATE}
        controller
        mapboxToken={token}
        // Constrain the zoom and lon/lat
        onViewStateChange={({ viewState }) => {
          viewState.zoom = Math.max(9, Math.min(13, viewState.zoom));
          const maxLatitude = 42;
          const minLatitude = 41.31;
          viewState.latitude = Math.max(
            minLatitude,
            Math.min(maxLatitude, viewState.latitude)
          );
          const minLongitude = -71.83;
          const maxLongitude = -71.12;
          viewState.longitude = Math.max(
            minLongitude,
            Math.min(maxLongitude, viewState.longitude)
          );
        }}
        layers={[
          new ScatterplotLayer<(typeof data)[number]>({
            id: "gages",
            data,
            getPosition: (site) => [
              site.sourceInfo.geoLocation.geogLocation.longitude,
              site.sourceInfo.geoLocation.geogLocation.latitude,
            ],
            getRadius: (site) =>
              site.values.length > 0 && site.values[0].value.length > 0
                ? Number(site.values[0].value[0].value) * 100
                : 0,
            getColor: (site) => {
              console.log("Checking color");
              return selectedData?.siteName === site.sourceInfo.siteName
                ? [255, 0, 0]
                : [0, 0, 255];
            },
            pickable: true,
            onClick: (info) => {
              updateSelectedDataAndTooltip(info);
              setHardSelected(true);
            },
            onHover: (info) => {
              if (hardSelected || (info.picked && tooltipOpen)) {
                return;
              }
              updateSelectedDataAndTooltip(info);
            },
            updateTriggers: {
              getColor: [selectedData],
            },
          }),
        ]}
        onClick={(info) => {
          if (info.layer === null) {
            setSelectedData(null);
            setHardSelected(false);
          }
        }}
     />

[mobhuiyan98]

Did you try not having selectedData with in an array ?
updateTriggers: { getColor: selectedData },

[Pessimistress]

getColor is deprecated and is not a valid trigger. Use getFillColor or getLineColor.