Skip to content

Conversation

@hugoatmooven
Copy link

As described in this issue, the info window will flicker under certain conditions when a parent re renders.
Since this issue was opened, I upgraded the library and noticed other components started flickering with no apparent reason as well. The Map component seems to be setting map options on every render, even if the options haven't changed. It's not obvious with default settings, but if you have custom options for UI controls, it becomes very apparent. In my case I have custom values for mapTypeControlOptions, and the map type buttons will flicker like crazy by simply panning the map.

General issues

I found the source of the problem in use-memoized hook. I think there is a fundamental mistake in the memoization logic, causing the value to update even when it hasn't changed. It uses use-previous hook to compare the current value with the previous value, then returns the previous value if no changes occurred. It works on the first re-render, but on the next render, what is now the current value, will become the previous value, so even without change it will return a different object than the original memoized value.
That problem went away when I reverted the change made by this pr to the use-memoized hook.

Info window issue

Even after fixing the memoization, I still had re-render problems with the info window component.
I found a couple of effects in the component that were directly mutating the memoized value of the options object, causing it to fail the deep equal test every time. That was fixed by cloning the object before mutating.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant