Fix flickering of map components #903
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.