jaredLunde / jaredLunde/masonic

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

Open
#153 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1.4k
Forks
63
PR merge metrics
No merged PRs in 30d

Description

**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**

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue with the useMasonry hook in a Chromium-based browser while cache is disabled, then compare opening the dialog with Firefox and cached loading. Trace why opening a grid item causes the masonry to render again even though its structure is unchanged. Done means the existing masonry layout remains stable when the dialog opens under the reported Chromium conditions.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.