(with/without) useMemo, how to trigger getColor without creating new Layer

[moong23]

situation

want to update the color of the trajectoryLayer (pathLayer) if hoveredTrajectory changes

functions needs to be implemented

• (implemented) when hover on each layer, the whole layer's trajectories should be highlighted. (so changed the getColor method like the below)
• without creating new Layer, just update the getColor with updateTrigger

So my questions are,

1. Can using useMemo on this part can affect on negative performance issue?
2. Is there any way to trigger getColor without creating a new Layers?

const TrajectoryLayers = useMemo(() => {
    if (!isLoaded) return null;
    let TrajLayer: any = [];
    bundleTrajData.forEach((bundle: any, index: number) => {
      TrajLayer.push(
        new PathLayer({
          id: `trajectoryLayer-${bundle[0].bundleId}`,
          data: bundle,
          pickable: true,
          getWidth: 10,
          getPath: (d: any) => d.pathData,
          getColor: (d: any) =>
            mapTotalData[index].bundleId === hoveredTrajectory
              ? HIGHLIGHT_LAYER_COLOR
              : d.color,
          autoHighlight: true,
          highlightColor: HIGHLIGHT_LAYER_COLOR,
          onHover: ({ object }: any) => {
            if (!object) {
              setHoveredTrajectory("");
              return;
            }
            setHoveredTrajectory(object.bundleId);
          },
          onClick: () => {
            setSelectedBundle(bundle.id);
          },
          updateTriggers: {
            getColor: [hoveredTrajectory],
          },
        })
      );
    });

    return TrajLayer;
  }, [mapTotalData, isLoaded, hoveredTrajectory]);

[moong23]

self answer

since creating layer isn't expensive, rather than using useMemo, just decided to create a new layer

https://deck.gl/docs/developer-guide/using-layers#creating-layer-instances-is-cheap

(let me know if I'm wrong)

[Pessimistress]

Yes, it is correct that you should always create a new layer instance.
Instantiating a layer is not expensive, updating attributes is. So the question you should be asking is not "how do I avoid creating new layers", but "how do I avoid recalculating color?"

In your code above, you are recalculating getColor for all layers on hover, even if their hover states are not changed. Better setup would be

          getColor: mapTotalData[index].bundleId === hoveredTrajectory	
              ? HIGHLIGHT_LAYER_COLOR  // use constant, not callback function
              : d => d.color,
          updateTriggers: {
            getColor: [mapTotalData[index].bundleId === hoveredTrajectory],  // only triggers update if getColor needs reevaluation
          },

See https://deck.gl/docs/developer-guide/performance#optimize-accessors

[moong23]

Could be obvious, but haven't realized that truth-comparison value could go into getColor too. thx for the help 👍

[moong23]

@Pessimistress
Mind if i ask one more question?

As you can see from my code above, I'm currently updating color of the path layer with the getColor attribute, not the highlightColor and autoHighlight (there is at the code but it does nothing since getColor gives HIGHLIGHT_LAYER_COLOR when layer is hovered) , since I want the whole layer's path to be highlighted.
I want to know if there's any way not to create a new layer when highlighted layer changes, but to use highlightColor (or maybe highlightedObjectIndex) for better performance