Description
The isDesktop function checks window.innerWidth during every render cycle of the VideoCard. If a user has 50 videos on screen, this triggers 50+ calculations on every state update, leading to frame drops.
Proposed Fix
Move the logic to a custom hook (e.g., useWindowSize) using a single resize event listener with a debounce, or replace with CSS Media Queries.
Test Cases
- TC1 (Functionality): Resize the browser window. Verify the layout switches between mobile and desktop correctly.
- TC2 (Performance): Use Chrome DevTools "Performance" tab. Verify that scrolling or updating state no longer triggers excessive JS execution for window width.
Description
The
isDesktopfunction checkswindow.innerWidthduring every render cycle of theVideoCard. If a user has 50 videos on screen, this triggers 50+ calculations on every state update, leading to frame drops.Proposed Fix
Move the logic to a custom hook (e.g.,
useWindowSize) using a singleresizeevent listener with a debounce, or replace with CSS Media Queries.Test Cases