Wrong uasge with useLayoutEffect and addEventListener/removeEventListener.

[wenlixun]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Liveness

How is your app built?

Webpack

What browsers are you seeing the problem on?

No response

Which region are you seeing the problem in?

No response

Please describe your bug.

Cannot remove the EventListener like below.It may cause the memory rise

What's the expected behaviour?

That should be

useLayoutEffect(() => {
  function fn(e) {
    sendLandscapeWarning(e.matches);
  }
  
  // Listen for future orientation changes and send warning
  landscapeMediaQuery.addEventListener('change', fn);

   // Remove matchMedia event listener
  return () => {
    landscapeMediaQuery.removeEventListener('change', fn);
  };
}, [])

Help us reproduce the bug!

It's easy to see

Code Snippet

React.useLayoutEffect(() => {
    if (isMobile) {
      // ...
      // Listen for future orientation changes and send warning
      landscapeMediaQuery.addEventListener('change', (e) => {
        sendLandscapeWarning(e.matches);
      });

      // Remove matchMedia event listener
      return () => {
        landscapeMediaQuery.removeEventListener('change', (e) =>
          sendLandscapeWarning(e.matches)
        );
      };
    }
  }, [isMobile, send]);

Console log output

No response

Additional information and screenshots

No response

[thaddmt]

Hello @wenlixun ! Thanks for filing the bug. The intention here is for this event listener to only run when the isMobile flag is true. When testing I have found that it does seem to correct add and remove the event listener on mobile devices and does not do so on non-mobile devices. Is there still a concern here?

[reesscot]

Closing out as this is working as expected.