Skip to content

[BUG]: Memory leak and layout shift in Finance page (pages/finance.tsx) #5114

@codxbrexx

Description

@codxbrexx

Describe the bug.

The Finance page (pages/finance.tsx) has two significant issues:

  1. Memory Leak (High Severity): The handleResizeRef is explicitly updated on every render (lines 23-25),
    creating a new function identity each time. The useEffect cleanup function (line 33) uses handleResizeRef.current to
    remove the listener, but by the time cleanup runs, handleResizeRef.current points to a different function instance
    than the one passed to addEventListener (line 30). This causes removeEventListener to fail, resulting in a duplicate resize listener being permanently attached to the window on every render.

  2. Layout Shift (CLS): The windowWidth state is initialized to 0. On the server and initial client render, shouldUseContainer is false. Immediately after hydration, useEffect updates the width, triggering a re-render that switches shouldUseContainer to true (for screens > 1700px). This causes a visible layout shift (Flash of Unstyled Content).

Expected behavior

  1. Resize listeners should be cleaned up properly when the component unmounts.
  2. The layout shouldn't jump around after loading.

Screenshots

Image Image

How to Reproduce

  1. Open pages/finance.tsx and notice the useEffect lineup (runs once) vs the handleResizeRef assignment (runs every render).
  2. Open the application in a browser.
  3. Navigate to the Finance page.
  4. Resize the window (this updates the ref).
  5. Navigate to another page and come back to Finance.
  6. Repeat this a few times.
  7. 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

  1. For the leak: Wrap the resize handler in useCallback so the function stays the same, or just define it inside the useEffect.
  2. 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?

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    Status

    In progress

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions