ReactJS - setState causes viewer to re-render every time

When using Resium with ReactJS and adding an ImageLayer, it is causing the viewer to refresh every time any setState is called. How can I use setState to update certain parts of the page without re-rendering the map?

Example below and screenshot of the issue

` class LiveMap extends React.PureComponent { viewerRef = React.createRef(); state = { name: “test” };

handleSelectedEntityChanged = (event) => {
    console.log("selected: " + event);
    this.setState({
        ...this.state,
        name: this.state.name === "test" ? "testt" : "test"
    });
};

render() {
    const defaultImageryProvider = new UrlTemplateImageryProvider({
        url : "https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png"
    });
  return (
    <Viewer
      full
      ref={this.viewerRef}
      onSelectedEntityChange={this.handleSelectedEntityChanged}>

    <ImageryLayer imageryProvider={defaultImageryProvider} />

    <Entity
        name={this.state.name}
        position={Cartesian3.fromDegrees(61, 130, 100)}
        point={{ pixelSize: 10 }} />
    </Viewer>
  );
}

}; `

[rot1024]

imageProvider prop of ImageryLayer component is read-only and is not changeable because ImageProvider of ImageryLayer of Cesium API is also read-only.

If the imageProvider is static, you can use outside const variable or useMemo hook as described in this page.

If you want to change the imageProvider dynamically, you cannot avoid regenerating the ImageryLayer. If you want to completely suppress warnings, key props can be used:

const imageProvider = useMemo(() => new UrlTemplateImageryProvider({ url }), [url]);

return <ImageryLayer key={url} imageryProvider={imageProvider} />;

We are also considering suppressing the warnings. Either way, please understand that the imageProvider is read-only.

[chingiz19]

I think I have the same issue. When I update variable in parent that holds Entities as children, they all get redrawn