Popup components with React hooks don't call hooks or render updates about react-azure-maps

[msasinowski]

Hello @smith1511 , thanks for reporting the issue.
I think for now there is no way to fix this in an easy way becauserenderToStaticMarkup does not support async rendering. The other thing is that the Popup that is provided by azure-maps-control accepts only static HTML string and we need to render it somehow on our side.

The one way to implement that kind of feature is just grabbing an async call from popupContent component and put that into a parent component and make sure that popupContent not have any async calls.

[smith1511]

Thanks for the reply - I feared that.

When you say move the logic to the parent - is there a way to do that so that the API calls are only done when the user clicks on a popup?

In my scenario I have 50-60 HTML markers, and ideally when someone clicks or mouses over one, I only want to load the async content at that point.

What I'm currently doing is pre-loading all content and passing the results into the Map as props - but this is obviously not very performant.

[smith1511]

One other thing I noticed is that this seems to prevent the usage of <Link to={...}/> - unless you know a way around that?

[msasinowski]

Thanks for the reply - I feared that.

When you say move the logic to the parent - is there a way to do that so that the API calls are only done when the user clicks on a popup?

In my scenario I have 50-60 HTML markers, and ideally when someone clicks or mouses over one, I only want to load the async content at that point.

What I'm currently doing is pre-loading all content and passing the results into the Map as props - but this is obviously not very performant.

Ok but you can also create a simple state for popup data in the parent component, and whenever someone clicks make an async call, set result in state and use that state in the popup content and this approach should work. It is really hard to help you without some code sample or something like that, so if you can please attach something like that :). Also, I would say that HtmlMarker from azure-map-controls may not be the best option for handling this amount of data. @srednicki95

[msasinowski]

One other thing I noticed is that this seems to prevent the usage of <Link to={...}/> - unless you know a way around that?

We will check this one.

[psrednicki]

@smith1511 We prepared example for you AsyncPopupExample

Fell free to comment if you have any other question