Prevent map re-rendering on update with Redux subscription

[llanginger]

Hi there,

I imagine there is a way of doing this that is easy and obvious that I have not seen. I would like to use this package in a redux app I am building but I am having trouble with the map re-rendering any time I update my store (which, being a redux app, is basically any time anything changes). There was a suggestion in another issue to use componentShouldUpdate(...){ return false } but this appears not to be of use here as redux's subscribe uses forceUpdate() which specifically circumvents componentShouldUpdate.

Any thoughts would be appreciated!

[aaronofleonard]

It is true that Redux does use forceUpdate, however it only forces and update on the HOC, the "outer component" that is wrapping the real component. Therefore, even if the outer component that's connected to the state forces an update, it doesn't mean that shouldComponentUpdate (not componentShouldUpdate) gets skipped. Using shouldComponentUpdate will still cause the base component to perform the check before updating.

Reference:
https://facebook.github.io/react/docs/react-component.html#forceupdate
"This will trigger the normal lifecycle methods for child components, including the shouldComponentUpdate() method of each child."

[tomchentw]

Please refer to Getting Help section in the README (or #469).

[basvdheijden]

I've searched stackoverflow, but couldn't find an answer. Care to elaborate on a solution @aaronofleonard ?

[aaronofleonard]

The answer is just use shouldComponentUpdate. As I brought out, Redux does use forceUpdate, but that does not circumvent shouldComponentUpdate inside your components. It only executes forceUpdate on the outer component that Redux makes and manages. Use shouldComponentUpdate, problem solved!

[jojo-tutor]

@aaronofleonard , This does not resolve the issue. What if I have list of Map Markers that are dependent on the global state/redux ? I want to update my Map but re-rendering the Map has this 'flicker' side-effect. How to solve this issue ?

[yuracherkasov]

I saved location data in the local State. In my case, this problem was solved.

[jojo-tutor]

@yuracherkasov , i'm aware of that but my situation is different, i must listen to socket for changes in the list of markers.

[nancy0507]

@jojo-tutor I am facing the same issue, anybody found solution for above. I have a websocket connection from where i am continuously getting lat lng, I am not even updating the center but it is updating the center as soon as any event is received and causing flickering issues