Shallow comparison of props in memoized component preventing rerender about react-azure-maps

[psrednicki]

Hi @dandical,
Im tried to reproduce your issue, but I can't. Can you show us how you mutate bounds in parent component?

Anyway I update example in https://github.com/WiredSolutions/react-azure-maps-playground and you can find this example named Change Options in Child on bottom of list.
The code you can find here: Azure/react-azure-maps-playground@f79a6d1 - i use state and useState to mutate bounds and pass to child.

[dandical]

hi @psrednicki thanks for the reply.

So the difference in your version is you pass in a complete cameraOptions object as props to the child, I tried this and it works, the camera adjust accordingly. However, when I create the cameraOptions object in the component, using a bounds value passed in from the parent as in my example above it doesn't work. I also mutate bounds with useState in the parent component.

So to summarise requiring a parent to pass in cameraOptions object works. The alternate method of requiring a parent to pass in camera values and then creating a cameraOptions object in the component with these values does not.

[psrednicki]

@dandical Ok i got your point now.
Now I set all like you and its still work as expected. You can find it on example/bounds-option branch in playground.

Can you show your parent component and show how exactly you mutate this bound so I can better understand how to help you.

[dandical]

Thanks for the reply again, I will try and find my example with cameraOptions not causing rerender, but for now I have the trivial example below which is kind of similar except with image sprites. Changing the image sprites props does not cause AzureMap and it's children to rerender. The symbols do not appear to start, which is acceptible since the image sprites aren't loaded in the map. After 3 seconds the setLocalSprites should cause a rerender of Wrapper, SpritesMutationExample and AzureMap along with it's children with the sprites now loaded. However, the rerender does not occur as I expect it should and the map remains empty.

const option: IAzureMapOptions = {
  authOptions: {
    authType: AuthenticationType.subscriptionKey,
    subscriptionKey: key,
  },
};

const markerBSprite: IAzureMapImageSprite = {
  id: "b",
  icon: ImageB,
};

const markerASprite: IAzureMapImageSprite = {
  id: "a",
  icon: ImageA,
};

const SpritesMutationExample = (props: { sprites: IAzureMapImageSprite[] }) => {
  return (
    <>
      <div style={{ height: "300px" }}>
        <AzureMapsProvider>
          <AzureMap imageSprites={props.sprites} options={option}>
            <AzureMapDataSourceProvider id={"data source provider"}>
              <AzureMapLayerProvider
                options={{
                  iconOptions: {
                    image: "a",
                  },
                }}
                type={"SymbolLayer"}
              />
              <AzureMapFeature type="Point" coordinate={[120, 120]}></AzureMapFeature>
            </AzureMapDataSourceProvider>
            <AzureMapDataSourceProvider id={"new provider"}>
              <AzureMapLayerProvider
                options={{
                  iconOptions: {
                    image: "b",
                  },
                }}
                type={"SymbolLayer"}
              />
              <AzureMapFeature type="Point" coordinate={[0, 0]}></AzureMapFeature>
            </AzureMapDataSourceProvider>
          </AzureMap>
        </AzureMapsProvider>
      </div>
    </>
  );
};

const Wrapper: React.FC = () => {
  // sprites start off as empty
  const [localSprites, setLocalSprites] = useState<IAzureMapImageSprite[]>([]);
 
 // sprites 3 seconds after initial render
  useEffect(() => {
    setTimeout(() => {
      setLocalSprites([markerASprite, markerBSprite]);
    }, 3000);
  }, []);
  return <SpritesMutationExample sprites={localSprites} />;
};

export default Wrapper;

[psrednicki]

@dandical About this imageSprites props - its should be initialised on map init. So all sprites that you want to use should be added on map mount. I think dynamically changing sprites can cause side effect - but its possible to implement and add effect for that.
If you want to add dynamically adding sprites please open new issue and we will start work on it.

About dynamically changing props in <AzureMap /> component: for now in 0.1.2 version you can changing

trafficOptions
userInteraction
cameraOptions
userInteraction

In 0.1.3 we will add: styleOptions and serviceOptions

If you need some more just open issue and tell us what you need. We will appreciate that!

[dandical]

Thanks @psrednicki I can't find the cameraOptions example again and your example is working for me so I assume I had something wrong so I closed the issue.

[psrednicki]

Also thanks you @dandical. Fell free to open new issue if you have any improvements or feature that you need.