VerticalMenu does NOT re-render when we add a widget in an existing item

If you have a VerticalMenu that is rendered and you decide to add a widget to one of the item, widget won't be re-render.

It is because of this line:

grommet-controls/src/components/VerticalMenu/VerticalMenu.tsx

Line 128 in 1046e93

items.toString() !== stateItems.toString()

Here we compare the toString of 2 array that twill in fact compare something like

[object Object],[object Object] !== [object Object],[object Object]

So if we have the same number of items it will not be re-render. I think in most cases comparing the instance is better as we often have immutable objects, so if content change the whole oject has changed. And if you want to support mutable array, then you can compare instance and when instance is identical then do a deep compare of the array. Something like:

items !== stateItems || deepCompare(items, stateItems)

But of course deepCompare is perhaps too slow (but it is the problem of using mutable objects).

Thanks @julienbachmann - feel free to file a PR if you have a good suggestion

Probably a deep compare is the best, even if it slows it down a bit