Masonry grid re renders when cache is disabled(in dev tools).

[bhatshakran]

Describe the bug I have created a masonry grid using the useMasonry hook with all the necessary settings and its working pretty fine. When you click on any of the grid items a detailed view of the item opens up in a dialog component.Also, the masonry/grid items each have an image whose src is an external cloud service. What i am noticing is that on Chromium based browsers when i disable the cache in the dev tools and click on a grid item, the whole masonry re renders which should not happen. Just to make the issue clear, this re render only happens on:

1. Chrome/Brave/Vivaldi
2. When cache is disabled. Its working fine on Firefox @jaredLunde

To Reproduce

Expected behavior The masonry should not re render as there are no changes in the structure of the masonry component just an absolute positioned div/dialog is placed on top of the existing layout.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 20
• Browser Chrome/Brave
• Version Brave:1.16.120; Chrome:120.0.6099.224

Smartphone (please complete the following information):

Additional context

[MinskLeo]

I experience similar/same issue. Actually cache property for me doesn't have any big difference - all grid items re-rendering when I hover on them. There can be some kind of issue with actual implementation of used components, but the chances are low I suppose. It's just MUI Grid > MUI ButtonBase > <img /> inside. The components with <img /> have some mouse event handlers for hovering and clicking.

[jaredLunde]

I don't think this is unexpected if you're not hardcoding image width/height. In that case, the grid has no option but to wait for the resize observer to calculate.