fix : prevent memory leak in MessageMenu setTimeout cleanup

[Amanyadav0315]

Problem

The MessageMenu component currently has a memory leak. When a user clicks "Copy" and the 2-second "Message Copied" notification is active, if the component unmounts before the timeout completes, the state update tries to run on an unmounted component. This can lead to memory leaks and runtime errors.

Solution

To fix this, we made a few improvements:

• Store the timeout reference: We use useRef to keep track of the setTimeout.
• Prevent overlapping timeouts: Clearing any existing timeout ensures rapid clicks don’t cause issues.
• Cleanup on unmount: useEffect clears the timeout when the component unmounts.
• Fix dependencies: Added the missing handleClose to the useCallback dependency array.

Benefits

• Eliminates memory leaks when the component unmounts.
• Handles multiple rapid copy clicks smoothly.
• Follows React best practices for side-effect cleanup.
• No changes to the UI or breaking functionality.
• TypeScript still compiles without errors.

Testing

• Component unmounts cleanly even during the timeout.
• Rapid consecutive clicks work as expected.
• Copy functionality behaves correctly.
• No TypeScript or runtime errors.

Learnings

This update highlights proper React patterns for managing side effects:

• Using useRef to store mutable values like timeout IDs.
• Cleaning up side effects with useEffect.
• Ensuring correct dependencies in useCallback to avoid stale closures.

[jitsi-jenkins]

Hi, thanks for your contribution!
If you haven't already done so, could you please make sure you sign our CLA (https://jitsi.org/icla for individuals and https://jitsi.org/ccla for corporations)? We would unfortunately be unable to merge your patch unless we have that piece :(.