CODEWITHSUNDEEP
reactjsreact-reduxopenlayers
Elijah
Elijah

Reputation: 63

How to force one react component to not re-render?

I have a main react component (The entire page) that contains several other UI items in it. One of those UI items is an OpenLayers map. Another component is a text field that contains the latitude and longitude of the current mouse pointer position.

I want the text field to update whenever the mouse pointer moves on the map. In my code's current state, this works.

The problem is every time the mouse moves and I update the react state value for the latitude/longitude (which gets rendered in the text field as expected) the map re-renders. This looks terrible because the map flashes every time as it begins to load the map tiles.

So I have the mouse latitude/longitude position, but I can't get the map to not flash/stutter/strobe.

Is there a way to get a mouse event from the map component, and send it to another component on the same screen without causing the render method to redraw the map every time? Or is React the wrong tool for this project?

As a note, I'm using React Redux to handle some state values, such as the map object. All of my child components are React functional components, but the main component for the page is a React class component.

If it helps, I set the mouse listener on the map like this:

this.props.map.on('pointermove', event => {
  this.setState({
    mouseCoordinates: (event.coordinate),
  });
});

This is my render method:

render() {
  return (
    <div className="main">
      <p className={noMargPad}>
        {this.state.mouseCoordinates}
      </p>
      <Map
        center={fromLonLat(this.state.center)}
        zoom={this.state.zoom}
      >
        <Layers>
          <TileLayer source={osm()} zIndex={0} />
          {this.state.showLayer1 && (
            <VectorLayer
              source={vector({
                features: new GeoJSON().readFeatures(geojsonObject, {
                  featureProjection: get("EPSG:3857"),
                }),
              })}
              style={FeatureStyles.MultiPolygon}
            />
          )}
          {this.state.showMarker && (
            <VectorLayer source={vector({
                features: this.state.features 
            })} />
          )}
        </Layers>
        <Controls>
          <FullScreenControl />
        </Controls>
      </Map>
    </div>
  );
}

Upvotes: 3

Views: 439

Answers (1)

Manodiestra
Manodiestra

Reputation: 36

One of the main advantages of using a tool like React is it will only refresh the components in the render method that have had an update to their dependent data. See this article for more information.

The fact that your map is rendering again indicates that the map, or one of its children is being passed a piece of data that keeps changing.

Based on your code, one possibility is the call to OSM(), since that's a constructor from the OpenLayers API. A new object/class instance in JavaScript could cause data re-render.

Upvotes: 1

Related Questions