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

Hey interesting issue - I’m redirecting a user after a sound and it looks like potentially a useEffect within use-sound isn’t returning a way to unmount. Thoughts?

  const [play,] = useSound(beepSfx)
  const history = useHistory()

  const onBeep = useCallback(() => play())

  const onCreate = useCallback(() => {
    onBeep()
    history.push(ROUTES.MANAGE_BRANDS)
  })

Console errors:

index.js:1 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.
    in WelcomeSelectPage (created by Context.Consumer)
  | console.<computed> | @ | index.js:1
-- | -- | -- | --
  | r | @ | react_devtools_backend.js:6
  | printWarning | @ | react-dom.development.js:88
  | error | @ | react-dom.development.js:60
  | warnAboutUpdateOnUnmountedFiberInDEV | @ | react-dom.development.js:23192
  | scheduleUpdateOnFiber | @ | react-dom.development.js:21200
  | dispatchAction | @ | react-dom.development.js:15682
  | (anonymous) | @ | index.ts:105
  | (anonymous) | @ | howler.js:1856
  | setTimeout (async) |   |  
  | _emit | @ | howler.js:1855
  | _ended | @ | howler.js:1920
  | setTimeout (async) |   |  
  | playWebAudio | @ | howler.js:843
  | play | @ | howler.js:855
  | (anonymous) | @ | index.ts:103
  | (anonymous) | @ | select.js:37

Line 37 is onBeep declaration

[thomaswang]

@joshwcomeau actually got this warning as well, it occurs after navigating to another page in Gatsby. Any chance you can re-open this?

const Button = props => {
  const [play] = useSound(bubble, { volume: 1 })

  const executeClick = () => {
    play()
    props.onClick && props.onClick()
  }

  return (
    <ButtonWrapper props={props} onClick={executeClick}>
      {props.children}
    </ButtonWrapper>
  )
}

index.js:2177 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.
    in Button (at pages/index.js:229)
    in a (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Link (created by Context.Consumer)
    in Location (created by GatsbyLink)
    in GatsbyLink (created by ForwardRef)
    in ForwardRef (at pages/index.js:228)
    in div (at pages/index.js:201)
    in main (at pageWrapper.js:112)
    in div (created by Context.Consumer)
    in StyledComponent (created by pageWrapper__InnerWrapper)
    in pageWrapper__InnerWrapper (at pageWrapper.js:110)
    in div (created by Context.Consumer)
    in StyledComponent (created by pageWrapper__Wrapper)
    in pageWrapper__Wrapper (at pageWrapper.js:109)
    in PageWrapper (created by ConnectFunction)
    in ConnectFunction (at pages/index.js:153)
    in IndexPage (created by ConnectFunction)
    in ConnectFunction (created by HotExportedConnect(IndexPage))
    in AppContainer (created by HotExportedConnect(IndexPage))
    in HotExportedConnect(IndexPage) (created by PageRenderer)

[VadimCiv]

I have the same problem here

const [play, { stop }] = useSound(alertSfx);

const alertsCritical = useSelector((state) => state.alerts.alertsCritical, shallowEqual);

useEffect(() => { if (alertsCritical.length > 0) { play(); } return () => { if (alertsCritical.length > 0) { stop(); } }; }, [alertsCritical, play, stop]);