score:3

Accepted answer

Because you are updating the whole position array every render, the reference to the array representing the previous location and the current location will be different, although the latitude and longitude might be exactly the same. To make it work, wrap PariticpantIcon inside React.memo, then do either one of the followings:

  • Split position into 2 different props, namely lat and long. Then inside ParticipantIcon you can put them back together. This codesandbox explains best.

  • Restructure the participants array. Group lat and long together initially would prevent new reference being created at render phase. This codesandbox demonstrates this.

Bonus: Since the ParticipantIcon component just displays the id, you might as well make it cleaner like this:

const ParticipantIcon = ({ id, position, children }) => {
  // This is showing if the component rerenderd
  useEffect(() => {
    console.log(id);
  });

  return (
    <MapIcon icon={droneIcon} position={position}>
      {id}
    </MapIcon>
  );
};


Related Query

More Query from same tag