ooade/react-click-away-listener

Memory Leak

iamgenchi opened this issue · 4 comments

iamgenchi commented

The react-click-away-listener fires the following memory leak FYI.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
Header@webpack-internal:///./components/modules/Header.tsx:24:74
div
Default@webpack-internal:///./components/layouts/Default/Default.tsx:22:18

overrideMethod react_devtools_backend.js:2557
    React 5
    handleClickAway Header.tsx:18
    handleEvents ClickAwayListener.tsx:92
    (Async: EventListener.handleEvent)
    ClickAwayListener ClickAwayListener.tsx:95

It's implemented as below:

<ClickAwayListener onClickAway={handleClickAway}>
  <button type="button" 
    onClick={() => {
      setOpenProfile(!openProfile);
    }}>
      <span>See Profile</span>
    </button>
</ClickAwayListener>
ooade commented

Hi @iamgenchi. What version of the library are you using and what version of React do you have installed? 🙏

iamgenchi commented

@ooade thank you for the prompt reply.

Here it is!

    "next": "10.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-click-away-listener": "^2.0.2"
  • 👍1
ooade commented

This has been fixed @iamgenchi. Thanks 🙏

iamgenchi commented

I can confirm @ooade the fix worked! Nice one!

  • ❤️1