The problem with popups when component is re-rendered

[pavlo976]

I have a problem when component is re-render because of the assignment of cords to url. By that, my popups flash on the map as many times as re-render occurs. Before using this component, everything was perfectly fine

[0horaa]

Same here

[pavlo976]

In addition, another problem occurs when two markers have the same position. Then when the component is re-rendered, the pop-ups are closed. @akursat @prorokky

[nottud]

I had a vaguely related issue but I solved by using memo on my component that showed the pop up.

[pavlo976]

I had a vaguely related issue but I solved by using memo on my component that showed the pop up.

Can you pass here code snippet how it looks like in your case?

[nottud]

Sorry I cannot give my code sample but effectively on the return statement for the component that showed the pop up I wrapped the the result with memo.

[luiskurihara]

Sorry I cannot give my code sample but effectively on the return statement for the component that showed the pop up I wrapped the the result with memo.

Im trying to use, but i have the problem 'NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.' when im clicking on popups ...

Can you help?

[SebastienHinard]

Hi, I've been spending a lot of time today trying to find out why my code was causing flickering, unwanted rerenders ...until i found this open issue.

In case it helps someone, here is what i implemented, thanks to @nottud comment above

const MyMainComponent = ({offers}) => {
    return (
        <MarkerClusterGroup
            chunkedLoading
            showCoverageOnHover={false}
            maxClusterRadius={40}
        >
            {offers.map((offer) => (
                <MyMarker key={offer.reference} position={[offer.latitude, offer.longitude]} offer={offer} />
            ))}
         </MarkerClusterGroup>
    )
}


const MyMarker = ({position, offer}: MapMarkerProps) => {
    const markerIcon = L.divIcon({
        html: `
            <div class="map-marker">
                <div class="map-marker__icon icon-position-solid"></div>
            </div>
        `,
        className: '',
        iconSize: L.point(40, 40)
    });

    // weird hack, marker clustered causes a lot of redenders when having popups
    return useMemo(() => (
        <Marker position={position} icon={markerIcon}>
            <Popup
                maxWidth={260}
                closeButton={false}
                offset={L.point(0, -20)}
            >
                <OfferCard
                    offer={offer}
                    variant='map-popup'
                />
            </Popup>
        </Marker>
    ), [offer]);
}

The useMemo seems to have resolved all the issues i had.