Resium: how to prevent map from redraw upon any change of state?

Question

I've got a sample Resium project that shows the map. I've added a simple onClick that sets some state which is NOT being used anywhere - I just set it. Still, it causes the entire map to redraw & flicker UNLESS I remove the terrainProvider. Example (terrainProvider is commented out) if you move/click the mouse, the entire Cesium UI flickers and redraws everything. I'm using React 17, Resium 1.14.3 (Cesium 1.86.1). Any idea what's going on?

import React, { useState } from "react";
import { Cartesian3, Color } from "cesium";
import { Viewer, Entity } from "resium";
import * as Cesium from 'cesium';

export default function App() {
    const [currentPos, setCurrentPos] = useState(null);

    const handleMouseClick = (e, t) => {
        setCurrentPos("xxx");
    }

    return (
        <Viewer full
            onClick={handleMouseClick}
            onMouseMove={handleMouseClick}
            // terrainProvider={new Cesium.CesiumTerrainProvider({ url: 'https://api.maptiler.com/tiles/terrain-quantized-mesh-v2/?key=xxxxxxx' })}
        >
            <Entity
                name="Tokyo"
                position={Cartesian3.fromDegrees(139.767052, 35.681167, 100)}
                point={{ pixelSize: 10, color: Color.RED }}
            />
        </Viewer>
    );
}

Answer 1

My guess is this. No matters that the currentPos is not used in the component, is still part of the component's state, then the components re-renders. In every render, the terrainProvider prop is receiving a new instance, so this causes that the entire Viewer re-renders too. Maybe you can save your instance as state in the component and don't create a new one everytime that the component is re-render.