-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Description
Describe the bug.
The Finance page (pages/finance.tsx) has two significant issues:
-
Memory Leak (High Severity): The
handleResizeRefis explicitly updated on every render (lines 23-25),
creating a new function identity each time. TheuseEffectcleanup function (line 33) useshandleResizeRef.currentto
remove the listener, but by the time cleanup runs,handleResizeRef.currentpoints to a different function instance
than the one passed toaddEventListener(line 30). This causesremoveEventListenerto fail, resulting in a duplicate resize listener being permanently attached to thewindowon every render. -
Layout Shift (CLS): The
windowWidthstate is initialized to0. On the server and initial client render,shouldUseContainerisfalse. Immediately after hydration,useEffectupdates the width, triggering a re-render that switchesshouldUseContainertotrue(for screens > 1700px). This causes a visible layout shift (Flash of Unstyled Content).
Expected behavior
- Resize listeners should be cleaned up properly when the component unmounts.
- The layout shouldn't jump around after loading.
Screenshots
How to Reproduce
- Open
pages/finance.tsxand notice theuseEffectlineup (runs once) vs thehandleResizeRefassignment (runs every render). - Open the application in a browser.
- Navigate to the Finance page.
- Resize the window (this updates the ref).
- Navigate to another page and come back to Finance.
- Repeat this a few times.
- Check the event listener count on
window. You will see it increase by 1 for every time you visited the page, because the old listeners were never removed.
Proposed Solution
- For the leak: Wrap the resize handler in
useCallbackso the function stays the same, or just define it inside theuseEffect. - For the layout: Use CSS media queries (like Tailwind's
2xl:) to handle the wide layout instead of waiting for JavaScript to check the window width.
Files Involved
pages/finance.tsx
🖥️ Device Information [optional]
- Operating System (OS):Linux
- Browser:Chrome
- Browser Version:144.0.7559.109
👀 Have you checked for similar open issues?
- I checked and didn't find similar issue
🏢 Have you read the Contributing Guidelines?
- I have read the Contributing Guidelines
Are you willing to work on this issue ?
Yes I am willing to submit a PR!
Metadata
Metadata
Assignees
Labels
Type
Projects
Status