[Question] Performance Optimizations

[jo185139]

Describe the bug I am developing a application that takes in data from a WebSocket and displays them on the the globe in real time. I am using the hexPolygonsData to display the countries, and then using the points to display the data. This is causes the frame rate to tank when there is a lot of data needing to be updated on the globe. Do you have any performance enhancements recommendations that should be doing? Any tipcs? Here is how i invoke the globe:

<Globe
      globeImageUrl={imgUrl}
      backgroundColor={"#ffffff00"}
      ref={globeRef}
      pointsData={globeState} //state that keeps track of the data
      pointAltitude="altitude"
      pointRadius={useCallback(() => parseFloat(env.get("VITE_POINT_RADIUS")))}
      pointColor={(d) => weightColor(d.count)}
      pointsTransitionDuration={parseInt(
        env.get("VITE_POINT_TRANSITION_DURATION")
      )}
      hexPolygonsData={hex.features}
      hexPolygonResolution={useCallback(() =>
        parseInt(env.get("VITE_POLYGON_RESOLUTION"))
      )}
      hexPolygonMargin={useCallback(() =>
        parseFloat(env.get("VITE_POLYGON_MARGIN"))
      )}
      hexPolygonColor={useCallback(() => env.get("VITE_POLYGON_COLOR"), [])}
    />

[vasturiano]

@jo185139 the first suggestion that comes to mind is to improve the memoization of your props that are passed into the component.

For example, this prop should be memoized:

pointColor={(d) => weightColor(d.count)}

And this one should be added an empty dependency list I suppose ([]):

hexPolygonMargin={useCallback(() => parseFloat(env.get("VITE_POLYGON_MARGIN")))}

Also, make sure that your data objects (globeState, hex.features) don't get regenerated or change unnecessarily from render to render, as that will force the component to redo the rendering for those layers from scratch.

[jo185139]

Thank you!