Steps to replicate the issue (include links if applicable):
- Open VideoCutTool and navigate to the home page.
- Allow the page to re-render due to normal state changes (for example, socket updates or context updates).
- Observe that socket event listeners (such as socket.on('update', ...)) are registered outside of a React useEffect hook.
- When the corresponding socket event is emitted by the server, the handler may be invoked multiple times during a single session.
What happens?:
The Home component registers socket event listeners directly in the component body instead of within a React effect with cleanup.
As a result, multiple listeners can be attached over time, leading to repeated state updates and unnecessary re-renders when the same socket event is received.
What should have happened instead?:
Socket event listeners should be registered inside a React useEffect hook and cleaned up appropriately on unmount or dependency changes.
This ensures that each socket event is handled only once per component lifecycle and prevents duplicated UI updates during longer sessions.
Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):
N/A (client-side issue observed in the current VideoCutTool frontend)
Other information (browser name/version, screenshots, etc.):
- Frontend-only issue related to React component lifecycle management.
- The behavior may be subtle and more noticeable during extended usage or when socket events are emitted multiple times.
- Based on review of the current Home component implementation in the VideoCutTool repository.
